我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
本文是流行的三角形和圆的绘制方法。
<style type="text/css">
.clearfix{zoom:1;} /* clearfix for IE */
.clearfix:after{content:"";display:block;clear:both;visibility:hidden;}
.triangle-solid>div,.triangle-hollow>div{float: left;margin-right: 50px;}
.top{
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000;
}
.bottom{
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #000;
}
.left{
position: relative;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 25px solid #000;
border-bottom: 25px solid transparent;
}
.right{
position: relative;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #000;
}
.triangle-hollow>.top:after{
content: '';
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #fff;
left: -50px;
top: 5px;
}
.triangle-hollow>.bottom:after{
content: '';
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #fff;
left: -50px;
top: -55px;
}
.triangle-hollow>.left:after{
content: '';
position: absolute;
border-top: 25px solid transparent;
border-right: 25px solid #fff;
border-bottom: 25px solid transparent;
left: 5px;
top: -25px;
}
.triangle-hollow>.right:after{
content: '';
position: absolute;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #fff;
left: -30px;
top: -25px;
}
.round{
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.round-hollow{
position: relative;
}
.round-hollow:after{
position: absolute;
content: '';
width: 46px;
height: 46px;
background: #fff;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
top:2px;
left:2px;
}
</style>
<body>
<h2>实心三角</h2>
<div class="triangle-solid clearfix">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<h2>空心三角</h2>
<div class="triangle-hollow clearfix">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<h2>实心圆</h2>
<div class="round"></div>
<h2>空心圆</h2>
<div class="round round-hollow"></div>
</body>
本文固定连接：https://code.zuifengyun.com/2019/05/1451.html，转载须征得作者授权。