CSS 制作镂空三角形的例子
@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;}
|
|
