css 画图形

css画图形

1.css画实心三角形

原理:

先画一个最简单正方形

高、宽都为10px

然后为他加上边框也为10px

这个时候你就会发现,他变成了一个梯形

假如需要画一个向下的实心尖头,那么就先将梯形的右,下,左边框隐藏。然后就得到一个等腰梯形

这个等腰梯形的宽和高还是为10px,如果想要变成尖的三角形,那么就是直接去掉高和宽

具体实现看如下的 codepen

##2.画空心箭头

原理:

1.先画一个正方形,然后将正方形旋转45度,最后隐藏其他边框

具体实现看如下的 codepen

See the Pen css draw by chris (@isevenfox) on CodePen.

分享到:

发表评论

昵称

沙发空缺中,还不快抢~