css 的常用案例

article/2025/11/11 13:30:34

Css 的几个常用案例

1. css 编写三角形

<!-- 三角形 --><div class='triangle-page'><div class="triangle-top"></div><div class="triangle-right"></div><div class="triangle-bottom"></div><div class="triangle-left"></div></div>

/* 三角形样式-上-右-下-左 */
.triangle-page {width: 50%;margin: 0 auto;
}
.triangle-top {width: 0;height: 0;border-right: 50px solid transparent;border-left: 50px solid transparent;border-top: 50px solid red;
}
.triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-right: 50px solid blue;
}
.triangle-bottom {width: 0;height: 0;border-right: 50px solid transparent;border-left: 50px solid transparent;border-bottom: 50px solid yellow;
}
.triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid green;
}

效果图

<!-- 直角三角形 -->
<div class="right-triangle"><div class="left-top"></div><div class="left-bottom"></div>
</div>

/* 直角三角形 */
.right-triangle {width: 50%;margin: 0 auto;
}
.right-triangle .left-top {width: 0;height: 0;border-top: 50px solid #ccc;border-right: 50px solid transparent;
}
.right-triangle .left-bottom {width: 0;height: 0;border-bottom: 50px solid #ccc;border-right: 50px solid transparent;
}

2. css编写燕尾型

<!-- 燕尾型 --><div class="container" style="margin-top: 25px;"><div class="step"></div></div>

/* 单个-燕尾型 */
.container .step {background-color: #0979CB;position: relative;display: inline-block;width: 120px;height: 40px;
}
.step::before {content: '';position: absolute;left: -10px;background: white;width: 40px;height: 40px;transform: rotate(-45deg);z-index: 1;box-shadow: 3px 3px 0px 0px white;
}
.step::after {content: '';position: absolute;right: -20px;border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid #0979CB;
}

<!-- 多个-燕尾型 -->
<div class="step-container" style="margin-top: 25px;"><div class="step step1"></div><div class="step2"></div><div class="step2"></div><div class="step2"></div>
</div>

/* 单个-燕尾型 */
.step-container {display: flex;overflow: hidden;align-items: center;
}
.step-container div.step,
.step-container div.step2 {background-color: #0979CB;position: relative;display: inline-block;flex-basis: 100px;height: 40px;
}
.step-container div.step:after,
.step-container div.step2:after {content: '';position: absolute;right: -26px;background: #0979CB;width: 40px;height: 40px;transform: rotate(-45deg);z-index: 1;box-shadow: 3px 3px 0px 0px white;
}
.step-container div.step2 {background-color: #ccc;
}
.step-container div.step2:after {background: #ccc;
}
.step-container div.step1:before {content: '';position: absolute;left: -10px;background: white;width: 40px;height: 40px;transform: rotate(-45deg);z-index: 1;box-shadow: 3px 3px 0px 0px white;
}

燕尾型

3. css编写多边形

（1）平行四边形

<!-- 平行四边形 -->
<div class="parallelogram"><div class="paralle"></div></div>

.parallelogram  {width: 50%;margin: 0 auto;
}
.parallelogram .paralle {width: 150px;height: 100px;background: red;/* 旋转的度数 *//* transform: skew(-45deg); */transform: skew(20deg);/* 起始位置 */transform-origin: left top;
}

（2）梯形

<!-- 梯形 -->
<div class="trapezoid"><div class="trape"></div>
</div>

/* 梯形 */
.trapezoid {width: 50%;margin: 0 auto;margin-top: 20px;
}
.trapezoid .trape {width: 100px;height: 0;/* border-top: 100px solid greenyellow; */border-bottom: 100px solid greenyellow;border-left: 100px solid transparent;border-right: 100px solid transparent;
}

（3）五边形

<div class="pentagon"><div class="pent"></div>
</div>

/* 五边形 */
.pentagon {width: 50%;margin: 0 auto;margin-top: 20px;
}
.pentagon .pent {position: relative;width: 54px;border-width: 50px 18px 0;border-style: solid;border-color: aqua transparent;
}
.pentagon .pent::before {content: "";position: absolute;width: 0;height: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent aqua;
}

（4）六边形

<!-- 六边形 -->
<div class="hexagon"><div class="hexa"></div>
</div>

/* 六边行 */
.hexagon {width: 50%;margin: 0 auto;margin-top: 50px;
}
.hexagon .hexa {position: relative;width: 100px;height: 50px;background: burlywood;
}
.hexagon .hexa::before {content: "";position: absolute;width: 0;height: 0;top: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid burlywood;
}
.hexagon .hexa::after {content: "";position: absolute;width: 0;height: 0;bottom: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid burlywood;
}

（5）五角形

<!-- 五角星 --><div class="five-star"><div class="star"></div></div>

/** 五角星 */
.five-star {width: 50%;margin: 0 auto;margin-top: 90px;
}
.five-star .star {position: relative;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid red;transform: rotate(35deg);display: block;
}
.five-star .star::before {position: absolute;width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 80px solid red;transform: rotate(-35deg);content: '';top: -45px;left: -65px;display: block;
}
.five-star .star::after {position: absolute;width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid red;transform: rotate(-70deg);top: 3px;left: -105px;display: block;content: '';
}

（6）爱心

<!-- 爱心 --><div class="heart-box"><div class="heart"></div></div>

/** 爱心 */
.heart-box {width: 50%;margin: 0 auto;margin-top: 90px;
}
.heart-box .heart {position: relative;width: 100px;height: 90px;
}
.heart-box .heart::before,
.heart-box .heart::after {position: absolute;content: '';width: 50px;height: 80px;background: red;top: 0;left: 50px;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;
}
.heart-box .heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%; 
}

4. css伪类的妙用

<!-- 对话框 --><div class="dialog-box"><div class="dialog"></div></div>

/* 对话框 */
.dialog-box {width: 50%;margin: 0 auto;margin-top: 50px;
}
.dialog-box .dialog {position: relative;width: 120px;height: 80px;background: #ccc;border-radius: 10px;
}
.dialog-box .dialog::before {content: '';position: absolute;width: 0;height: 0;top: 26px;right: 100%;border-top: 13px solid transparent;border-bottom: 13px solid transparent;border-right: 26px solid #ccc;
}

5. css浮动的清除

（1）浮动产生的原因
一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。（如下图）
浮动原因

<div class="float-reason"><div class="left-box"></div><div class="right-box"></div>
</div>

.float-reason {border: 1px solid red;width: 50%;
}
.float-reason .left-box {float: left;width: 40%;height: 100px;border: 1px solid black;
}
.float-reason .right-box {float: right;width: 40%;height: 100px;border: 1px solid black;
}

（2）浮动产生的影响

  1. 背景不能正常显示
  2. 边框不能撑开
  3. margin和padding值不能正确显示
    （3）清除浮动的方法
    新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加此div引入“class=“clear””样式。这样即可清除浮动。
<div class="float-reason"><div class="left-box"></div><div class="right-box"></div><div class="clear"></div>
</div>

/* 追加 */
.clear {clear: both;
}
  1. 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
.float-reason {border: 1px solid red;width: 50%;overflow: hidden; // 父级增加
}

清除浮动后

6. css实现图片旋转

<div class="rotate-box"><img class="rotate-img" src="../../static/images/small.png" alt="">
</div>

.rotate-img {transform: rotate(360deg);-webkit-transform: rotate(360deg);animation: rotation 5s linear infinite;-moz-animation: rotation 5s linear infinite;-webkit-animation: rotation 5s linear infinite;-o-animation: rotation 5s linear infinite;
}
@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}
}

图片旋转


http://chatgpt.dhexx.cn/article/fIyx4Pfl.shtml

相关文章

HTML CSS JavaScript简单案例实现

HTML CSS JavaScript简单案例实现

文章目录 简易计算器个人简历登录页面注册页面注册&#xff08;一&#xff09;注册&#xff08;二&#xff09; html、css 实现一个漂亮的表格书城列表页面简单框架全选反选功能 简易计算器 calculator.html <!doctype html> <html> <head><meta charse…
阅读更多...
CSS基础学习案例

CSS基础学习案例

CSS–小米商城案例 小米商城案例目录 CSS--小米商城案例1.内容回顾2.案例顶部菜单3.二级菜单3.1 划分区域3.2搭建骨架 4.整合 顶部菜单 二级菜单小结5. 推荐菜单5.1整合案例如下5.2 小结 6.CSS进阶知识点6.1 hover&#xff08;伪类&#xff09;6.2 after&#xff08;伪类&…
阅读更多...
html/css 个人网站实例(一)

html/css 个人网站实例(一)

显示效果 HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>alalasheep的个人网站</titl…
阅读更多...
CSS实例 简单案例

CSS实例 简单案例

CSS文件 注意改变图片的样式时&#xff0c;是要加给图片所在的标签 比如p /* 整体 */ body {font: 16px/28px "Microsoft YaHei"; }/* 大标题 */ h1 {font-weight: 600;text-align: center; }/* 连接a */ a {text-decoration: none; }/* 时间 来源 */ .scor {font-…
阅读更多...
CSS案例（1）

CSS案例（1）

写在前面&#xff1a;本篇所有 css 均使用内嵌式引入。若想使用外链式&#xff0c;需先新建 .css 文件&#xff0c;再通过 link 标签引入到 html 里&#xff0c;样式部分的代码基本不用做其他修改。 目录 1 导航栏样式 2 商品展示页面 3 简单新闻页面 4 布局样式 1 导航栏样…
阅读更多...
小案例CSS

小案例CSS

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content"widthde…
阅读更多...
CSS常见样式的介绍和使用（附加案例）

CSS常见样式的介绍和使用（附加案例）

CSS样式 一、css介绍 层叠样式表(英文全称&#xff1a;Cascading Style Sheets) ​ 是一种用来表现HTML标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&#xff0c;还可以…
阅读更多...
CSS 示例

CSS 示例

基础内容 引入样式表&#xff1a;<link rel"stylesheet" href"test.css"> em&#xff1a;相对大小单位 选择器 示例说明#id选择所有类.clsss选择所有类p选择所有p标签&#xff0c;可以加逗号分组p em后代选择器&#xff0c;选中p标签中所有em标签…
阅读更多...
CSS-200个小案例（一）

CSS-200个小案例（一）

最近我在youtube上跟着大神学习200个CSS小案例&#xff0c;作者Online Tutorials 编码的内容很实用&#xff0c;案例中涉及定位、变换、动画等概念&#xff0c;适合进一步学习和巩固CSS知识&#xff0c;能帮助我们实现页面的特效。 youtube视频链接&#xff1a;https://www.you…
阅读更多...
30个超棒的CSS应用实例

30个超棒的CSS应用实例

这 篇文章是很早之前在博客园看到的&#xff0c;收藏在网摘里&#xff0c;今天再看发现实在很棒&#xff0c;转载过来方便以后参考用&#xff0c;最棒的地方是这些效果的实现都只是利用CSSHTML 来实现的&#xff0c;基本上没有用到什么FLASH或JS脚本&#xff0c;大家也可以看看…
阅读更多...
【CSS实例】

【CSS实例】

学习目标&#xff1a; css样式学习、总结&#xff0c;知识巩固 学习内容&#xff1a; 在这里我将会发布一些自己学习过程中完成的css实例&#xff0c;可能是跟着网上学习的练习作品&#xff0c;也可能是自己的随意的一个想法。每个作品中会列出编写思路&#xff0c;和编写过程…
阅读更多...
codewar代码练习1——8级晋升7级

codewar代码练习1——8级晋升7级

最近发现一个不错的代码练习网站codewar&#xff08;http://www.codewars.com&#xff09;。注册了一个账号&#xff0c;花了几天的茶余饭后时间做题&#xff0c;把等级从8级升到了7级。本文的目的主要介绍使用感受及相应题目&#xff0c;可供大家参考。 新人注册为8级&#xf…
阅读更多...
codewar python 遗忘点

codewar python 遗忘点

2019独角兽企业重金招聘Python工程师标准>>> 1、计算字符串中特定字符串出现的次数 s this is a new technology,and I want to learn this. print(s.count(this, 0, len(s))) #目标字符串区分大小写 2、数字左边补0的方法,字符串补空格 #python中有一个zfil…
阅读更多...
Codewar - Bit Counting

Codewar - Bit Counting

2019独角兽企业重金招聘Python工程师标准>>> Write a function that takes an (unsigned) integer as input, and returns the number of bits that are equal to one in the binary representation of that number. Example: The binary representation of 1234 is…
阅读更多...
codewar 代码练习1——8级晋升7级

codewar 代码练习1——8级晋升7级

最近发现一个不错的代码练习网站codewar&#xff08;http://www.codewars.com&#xff09;。注册了一个账号&#xff0c;花了几天的茶余饭后时间做题&#xff0c;把等级从8级升到了7级。本文的目的主要介绍使用感受及相应题目&#xff0c;可供大家参考。 新人注册为8级&#xf…
阅读更多...
codewar 代码练习2——7级晋升6级

codewar 代码练习2——7级晋升6级

7级晋升到6级的过程中以做6级题以及以前未完成的题目为主&#xff0c;一般选择算法题或者基础题。相比之前从8级升级7级&#xff08;参见此博客&#xff1a;http://blog.csdn.net/m0_37324740/article/details/78408249&#xff09;的难度有所提前&#xff0c;并且一些题目结合…
阅读更多...
R数据分析，codewar的年终总结，和一周年总结

R数据分析，codewar的年终总结，和一周年总结

前阵子单位各个部门都在要求弄总结&#xff0c;想想自己这个公众号也写了快一年了&#xff0c;专门回去翻了翻&#xff0c;这个公众号发布的第一篇文章是在2021年的1月17日&#xff0c;我想2022年的1月17日我就把现在敲的文字推出来吧&#xff0c;也算是一个年终和周年总结。 …
阅读更多...
CodeWar题目

CodeWar题目

打算把不同网站上面的题目分开整理&#xff0c;免得麻烦。Code War上面我还是刷了一堆6级及以下的题目的&#xff0c;不过价值不大&#xff0c;这种不太能够训练实际解决问题的能力&#xff0c;所以我已经很久没上过了&#xff0c;有时间了可能会重新上去刷题吧&#xff0c;到时…
阅读更多...
Codewar 笔记

Codewar 笔记

1. Weight for weight 题目&#xff1a; For example 99 will have “weight” 18, 100 will have “weight” 1 so in the list 100 will come before 99. Given a string with the weights of FFC members in normal order can you give this string ordered by “weights”…
阅读更多...
codewar刷题，苦海造舟之始

codewar刷题，苦海造舟之始

今天又是被惨虐的一天&#xff0c;尽管今天是我这篇处女座发布的日子。   事情是这样的&#xff0c;身为一个刚迈步进入编程领域的小白&#xff0c;在无忧无虑&#xff0c;轻松惬意的心情下刷完了一套python课后&#xff0c;偶然间&#xff0c;很突然地了解到codewars这么个玩…
阅读更多...
推荐文章

Copyright @ 2022~2023