CSS 制作镂空三角形的例子

作者：袖梨 2022-06-25


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

相关文章

精彩推荐