最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS 制作镂空三角形的例子
时间:2022-06-25 10:08:08 编辑:袖梨 来源:一聚教程网
@kejunz 的
代码如下 | 复制代码 |
|
@小水坑里的小鱼 的 DEMO
代码如下 | 复制代码 |
body { background: #000; } #line, #line:before, #line:after { position: absolute; width: 10px; height: 300px; background: #fff; border-radius: 5px; } #line:before, #line:after { content: ''; } #line:before { -webkit-transform-origin: top center; -webkit-transform: rotate(-60deg) translate(-3px); } #line:after { -webkit-transform-origin: bottom center; -webkit-transform: rotate(60deg) translate(-3px); } |
@kejunz 和 @小水坑里的小鱼 两位大大的实现方式差不多,都是利用伪元素通过绝对定位和旋转来实现。
@点头猪 的 DEMO,妹子的方法和前面两位大大有一些区别,只了一个伪元素来绝对定位,然后通过倒影重叠来形成三角形。
代码如下 | 复制代码 |
|
@一丝yisi 给出的 DEMO 也是两个伪元素,通过绝对定位和旋转来实现。不过增加了动画,让我们更加清楚的了解制作三角形的过程。(本人为了减少页面的代码量,把其他浏览器的前缀都给去掉了,只支持webkit内核浏览器。)
代码如下 | 复制代码 |
.demo{cursor:pointer;width:100px;}
|
相关文章
- 分析师称柴犬币目标价为0.000032美元,或将开启更大规模反弹 07-08
- 斗罗大陆怎么获得换武魂转换卡 斗罗大陆获得换武魂转换卡方法推荐 07-08
- 三角洲行动长弓溪谷大金在哪 三角洲行动长弓溪谷大金位置大全 07-08
- 密安币(PAP币)不合法 07-08
- 二重螺旋武器怎么获取 武器锻造与切换技巧详解 07-08
- 炉石传说安戈洛萨满预构筑卡组推荐 07-08