如何在CSS中制作三角圆角三角形 [英] How to make 3-corner-rounded triangle in CSS
本文介绍了如何在CSS中制作三角圆角三角形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用无Javascript来实现这样的自定义颜色的形状:
I'd like to achieve a custom-colored shape like this using no Javascript:
目前我在一个橙色的矩形div上覆盖一个'框架'的图像,但这是相当黑客。
我想我可以使用动态生成的canvas元素,但这不仅需要JS,而且需要HTML5 canvas支持。任何想法?
Currently I'm overlaying an image of the 'frame' over an orange rectangular div, but this is pretty hacky. I suppose I could use a dynamically generated canvas element, but that not only requires JS, but HTML5 canvas support. Any ideas?
推荐答案
我最好的尝试: http://dabblet.com/gist/4592062
My best attempt: http://dabblet.com/gist/4592062
像素完美的任何尺寸,使用比Ana的原始解决方案更简单的数学,而且在我看来更直观):
Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :)
.triangle {
position: relative;
background-color: orange;
text-align: left;
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
width: 10em;
height: 10em;
border-top-right-radius: 30%;
}
.triangle {
transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
<div class='triangle'></div>
这篇关于如何在CSS中制作三角圆角三角形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文