CSS 制作镂空三角形的例子

时间：2014-04-02 编辑：简简单单来源：一聚教程网

@kejunz 的

代码如下

复制代码

Untitled

@小水坑里的小鱼的 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,妹子的方法和前面两位大大有一些区别，只了一个伪元素来绝对定位，然后通过倒影重叠来形成三角形。

代码如下

复制代码

Demo

@一丝yisi 给出的 DEMO 也是两个伪元素，通过绝对定位和旋转来实现。不过增加了动画，让我们更加清楚的了解制作三角形的过程。（本人为了减少页面的代码量，把其他浏览器的前缀都给去掉了，只支持webkit内核浏览器。）

代码如下

复制代码

.demo{cursor:pointer;width:100px;}
.corner-rounded,.corner-rounded:after,.corner-rounded:before{width:12px;height:100px;border-radius:999px;background-color:#FFAC5F}
.corner-rounded{position:relative}
.corner-rounded:after,.corner-rounded:before{content:"";position:absolute;top:0;left:0;-webkit-transition:all 1.2s ease-in-out;-webkit-transform-origin:50% 6px}
.corner-rounded:after{-webkit-transform:rotate(-60deg)}
.corner-rounded:before{-webkit-transform-origin:50% -webkit-calc(100% - 6px);-webkit-transform:rotate(60deg)}
.demo:hover .corner-rounded:after{background-color:#88c;-webkit-transform:none}
.demo:hover .corner-rounded:before{background-color:#66E070;-webkit-transform:none}

上一个：移动web开发常用技巧
下一个：利用纯 CSS 创建一个三角形

推荐专题

最新下载

热门教程

CSS 制作镂空三角形的例子

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程