CSS可以产生各种形状。正方形和矩形很容易,因为它们是正方形和矩形,因为它们是正方形。 web 自然形状。添加宽度和高度以获得所需的精确矩形。添加框架半径,您可以将这个形状变成圆形,并且有足够的框架半径,您可以将这些矩形变成圆形和椭圆形。
推荐教程:CSS视频教程:CSS视频教程
我们也可以使用 CSS 伪元素中的 ::before
和 ::after
,这为我们提供了向原始元素添加另外两种形状的可能性。通过巧妙地运用定位、转换和许多其他技能,我们只能使用一个 HTML 元素在 CSS 许多形状都是在中创造的。
虽然我们现在大多使用字体图标或svg图片,但我们似乎使用字体图标或svg图片 CSS 制作图标意义不大,但如何实现这些图标所使用的一些技巧和想法值得我们学习。
1.正方形
#square {
width: 100px;
height: 100px;
background: red;
}
2.长方形
#rectangle {
width: 200px;
height: 100px;
background: red;
}
3.圆形
#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 50%
}
4.椭圆形
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}
5.上三角
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
6.下三角
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
7.左三角
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
8.右三角
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
9.左上角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
10.右上角
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
11.左下角
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
12.右下角
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
13.箭头
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
transform: rotate(10deg);
}
#curvedarrow:after {
content:
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你