一聚教程网:一个值得你收藏的教程网站

热门教程

CSS 制作镂空三角形的例子

时间:2022-06-25 10:08:08 编辑:袖梨 来源:一聚教程网


@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}


热门栏目