利用CSS绘制常见的几何图形,可以使用伪元素和边框属性来实现。
利用边框的border-radius属性可以绘制圆形,通过设置宽高相等和边框半径为50%即可。
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
利用伪元素的border属性可以绘制三角形,通过设置边框大小和颜色,以及将某些边框设为透明即可。
.triangle {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent #f00 transparent;
}
利用普通的div元素即可绘制矩形,通过设置宽高和背景颜色即可。
.rectangle {
width: 100px;
height: 50px;
background-color: #f00;
}