摘要:使用之前,都是利用图片作为背景来实现的,现在有这把利器,顺利完美的绘制六边形。绘制六边形代码可见代码非常简单,这里要运用伪元素来实现代码看完这个案例,对于绘制三角形就简单了,尝试自己绘制一下吧。
使用h5之前,都是利用图片作为背景来实现的,现在有h5+css3这把利器,顺利完美的绘制六边形。
绘制六边形
html代码:
可见html代码非常简单,这里要运用伪元素来实现
css代码:
.shape-layer { position:relative; width:336px; height:196px; background-color:#0174db; } .shape-layer::before { content:""; position:absolute; left:0; top:-96px; width:0; height:0; border-left:transparent solid 168px; border-bottom:#0174db solid 96px; border-right:transparent solid 168px; } .shape-layer::after { content:""; position:absolute; left:0; bottom:-96px; width:0; height:0; border-left:transparent solid 168px; border-top:#0174db solid 96px; border-right:transparent solid 168px; }
看完这个案例,对于绘制三角形就简单了,尝试自己绘制一下吧。
本文为原创文章,转载请注明出处,多谢您的支持。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112126.html
摘要:中需要用到的数学公式很多网上都有,不需要自己手写,只要增加点印象,一个复制就可以拉过来用了,啦啦啦,小君也很会偷懒的,哈哈哈绘制直线同理,定义一个名为的函数来实现这部分功能。 前言 身为一个程序员竟然沉迷游戏,wtf??? 都怪腾讯前几天出了一款叫做寻仙的手游,作为曾经的资深玩家,小V君犹豫再三还是忍不住入坑了。入坑了怎么不去打游戏,还在这里发文章? 不不不,小V君今天在这里可不是要跟...
摘要:在之前所提到绘制正多边形的方法,算是纯粹利用伪元素来完成,不过坦白说还有另外一种方法,可以将单一做更多形状的变换,这种方法就是的,这个看起来有点眼熟,因为它原本就存在于里头,利用掩码剪裁的方法,连接坐标绘制掩码区域,就可以做出许多不同的 在之前所提到绘制正多边形的方法,算是纯粹利用伪元素来完成,不过坦白说还有另外一种方法,可以将单一div做更多形状的变换,这种方法就是CSS3的clip...
阅读 598·2021-09-22 10:02
阅读 6216·2021-09-03 10:49
阅读 549·2021-09-02 09:47
阅读 2136·2019-08-30 15:53
阅读 2903·2019-08-30 15:44
阅读 810·2019-08-30 13:20
阅读 1793·2019-08-29 16:32
阅读 867·2019-08-29 12:46