最新下载
热门教程
- 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;}
|
相关文章
- 《燕云十六声》配置要求介绍 12-25
- 《燕云十六声》搬砖介绍 12-25
- 时空中的绘旅人天宇之间怎么玩 绘旅人天宇之间活动玩法介绍 12-25
- QQ2024年度报告怎么看 2024qq年度报告玩法介绍 12-25
- 归龙潮珠砂什么时候up 归龙潮红缘绮梦卡池介绍 12-25
- 王者荣耀S38赛季有什么更新 12-25