css 画图形

css 画图形

九月 6, 2017 阅读 172 字数 273 评论 0 喜欢 0

css画图形

1.css画实心三角形

原理:

先画一个最简单正方形

高、宽都为10px

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

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

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

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

具体实现看如下的 codepen

##2.画空心箭头

原理:

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

具体实现看如下的 codepen

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.