最新下载
热门教程
- 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;}
|
相关文章
- 价格跟踪交易-价格跟踪交易软件 04-25
- 碧蓝航线使用要注意什么 04-25
- 明日之后苹果能做什么食物攻略 04-25
- 以闪亮之名浅栗捏脸数据id攻略 04-25
- 逆水寒手游春归学堂奇遇如何完成 04-25
- 明日之后二层别墅建造蓝图攻略 04-25