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: <前端开发WwW.adminjs.cn>
声明：本文仅供个人学习使用，来源于互联网，本文有改动，本文遵循[BY-NC-SA]协议, 如有侵犯您的权益，请联系本站，本站将在第一时间删除。谢谢你
