[英]Is it possible to make a rounded triangle with just CSS?
I'm trying to make the following shape with just CSS: 我想用CSS制作以下形状:
Here is what I currently have: 这是我目前拥有的:
.triangle { width: 0; height: 0; border-style: solid; border-width: 56px 56px 0 0; border-color: #ff4369 transparent transparent transparent; }
<div class="triangle"> </div>
I'm unable to use border radius to make the top-left corner rounded... Is there another way to do this or do I need to use an SVG? 我无法使用边框半径使左上角变圆...有没有其他方法可以做到这一点,还是我需要使用SVG?
Yes it's possible using border-radius
: 是的,可以使用
border-radius
:
.triangle { box-sizing: border-box; width: 60px; height: 60px; border-top: solid 30px rgb(200,30,50); border-left: solid 30px rgb(200,30,50); border-top-left-radius: 12px; border-right: solid 30px transparent; border-bottom: solid 30px transparent; }
<div class="triangle triangle-0"></div>
You might consider the border-radius
and clip-path: polygon()
solution: 您可以考虑
border-radius
和clip-path: polygon()
解决方案:
.triangle { width: 56px; height: 56px; background: #ff4369; border-top-left-radius: 12px; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0); clip-path: polygon(0 0, 0% 100%, 100% 0); }
<div class="triangle"></div>
And another solution with the :before
or :after
pseudo-element , which can serve as a layer: 另一个解决方案是
:before
或:after
伪元素 ,它可以作为一个层:
.triangle { width: 56px; height: 56px; background: #ff4369; border-top-left-radius: 12px; position: relative; overflow: hidden; } .triangle:after { content: ""; position: absolute; top: 0; left: 50%; width: 100%; height: 100%; background: #fff; transform: skew(-45deg); }
<div class="triangle"></div>
You can easily do with linear-gradient
and it's well supported: 您可以轻松地使用
linear-gradient
并且它得到了很好的支持:
body { background: #ccc; } .triangle { margin: 10px; width: 56px; height: 56px; background: linear-gradient(to bottom right, #ff4369 50%, transparent 0); border-radius: 10px 0 0 0; }
<div class="triangle"> </div>
To actually answer your question (and provide the first answer without border-radius
): If you want a CSS only solution, you will have to use border-radius
. 要实际回答你的问题(并提供没有
border-radius
的第一个答案):如果你想要一个只有CSS的解决方案,你将不得不使用border-radius
。
Nevertheless I would highly recommend to use SVG for creating shapes, as simple shapes like this are easy to create manually, it's responsive, it's widely supported now and (as @chharvey mentioned in the comments) semantically more appropriate. 尽管如此,我强烈建议使用SVG来创建形状,因为像这样的简单形状很容易手动创建,它具有响应性, 现在它得到了广泛的支持,并且(如评论中提到的@chharvey)在语义上更合适。
<svg viewbox="0 0 50 50" height="56px"> <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" /> </svg>
You can find more information about the path properties in the specs . 您可以在规范中找到有关路径属性的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.