CSS奇思妙想-圆角三角形的巧妙实现

/div>div{width:10em;height:10em;transform:rotate(-60deg)skewX(-30deg)scale(1,0.866);}2.转其中一个将角变成圆角：div{width:10em;height:10em;transform:rotate(-60deg)skewX(-30deg)scale(1,0.866);+border-top-right-radius:30%;}至此，我们就成功得到了一个圆角菱形！匹配3个圆角菱形很简单，我们只需要利用元素的另外两个伪元素生成2个圆角菱形，用旋转和位移拼接一共3个图形！完整代码如下：}div,div:before,div:after{width:10em;height:10em;border-top-right-radius:30%;}div{transform:rotate(-60deg)skewX(-30deg)scale(1,.866);}div:before{transform:rotate(-135deg)skewX(-45deg)scale(1.414,.707)translate(0,-50%);}div:after{transform:rotate(135deg)skewY(-45deg)scale(.707,1.414)translate(50%);}，就可以得到一个圆角三角形！效果如下：完整代码可以点击这里：CodePenDemo--Atrianglewithrounded[3]方法三。图形拼接实现渐变圆角三角形？不！上面的方案虽然不是太复杂，但有一点不完美就是不能支持渐变圆角三角形。像这样：如果需要实现一个渐变的圆角三角形，还是有点复杂。但仍有人对其进行了修补。以下方法参考——如何在CSS中制作三角圆角三角形[4]。也是使用多个块进行拼接，但是这次我们的基础图形会很复杂。首先我们要实现这样一个容器框，和上面的方法类似，可以理解为一个圆角的菱形（为了便于理解画出边框）：div{width:200px;height:200px;transform:rotate(30deg)skewY(30deg)scaleX(0.866);border:1pxsolid#000;border-radius:20%;}接下来我们同样使用两个伪元素来实现两个略显怪异的拼接graphics，它是transform的各种用法的集合：div::before,div::after{content:"";position:absolute;width:200px;height:200px;}div::before{border-radius:20%20%20%55%;变换：scaleX(1.155)skewY(-30deg)rotate(-30deg)translateY(-42.3%)skewX(30deg)scaleY(0.866)translateX(-24%);background:red;}div::after{border-radius:20%20%55%20%;background:blue;transform:scaleX(1.155)skewY(-30deg)rotate(-30deg)translateY(-42.3%)skewX(-30deg)scaleY(0.866)translateX(24%);}为了方便理解，做了一个简单的变换动画：其实质就是实现这样一个图形：finally，给父元素添加一个overflow:hidden，去掉父元素的border，得到一个圆角三角形：由于这两个元素重叠空间的特殊结构，此时，添加相同的渐变色到两个伪元素会完美重叠：div::before,div::after,{background:linear-gradient(#0f0,#03a9f4);}最后得到一个渐变圆角三角形：完整代码以上图形，你可以点击这里：CodePenDemo--Atrianglewithroundedandgradientbackground[5]最后，本文介绍几种在CSS中实现圆角三角形的方法。虽然有些比较繁琐，但也体现了CSS“有趣又折磨人”的一面。到具体应用的时候，还是需要自己思考的。选择是否使用上面的方法，有时候，裁剪图片可能是更好的解决方法参考[1]《老生常谈之 CSS 实现三角形》：https://juejin.cn/post/6950081305560219679[2]CodePenDemo——用SVG实现Trianglewith圆角：https://codepen.io/Chokcoco/pen/eYWZvKo[3]CodePen演示——带圆角的三角形：https://codepen.io/Chokcoco/pen/vYmLVZr[4]Howtomake3-corner-CSS中的圆角三角形：https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css[5]CodePen演示——具有圆形和渐变背景的三角形：https://codepen.io/Chokcoco/pen/LYyGRpV[6]Github——iCSS：https://github.com/chokcoco/iCSS