是否可以用CSS制作圆角三角形？

Question

我试图用CSS制作以下形状：

以下是我目前的情况：

＆＃13;

＆＃13;

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 56px 0 0;
  border-color: #ff4369 transparent transparent transparent;
}

＆＃13;

<div class="triangle">
</div>

＆＃13;

＆＃13;

＆＃13;

我无法使用边框半径使左上角变圆......是否有其他方法可以执行此操作或是否需要使用SVG？

Answer 1

是的，可以使用border-radius：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="triangle triangle-0"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以考虑border-radius和clip-path: polygon()解决方案：

＆＃13;

＆＃13;

.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);
}

＆＃13;

<div class="triangle"></div>

＆＃13;

＆＃13;

＆＃13;

使用:before或:after 伪元素的另一个解决方案，可用作图层：

＆＃13;

＆＃13;

.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);
}

＆＃13;

<div class="triangle"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以轻松使用IDLABEL，并且得到了很好的支持：

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

Answer 4

要实际回答您的问题（并提供没有border-radius的第一个答案）：如果您想要仅限CSS的解决方案，则必须使用border-radius。

尽管如此，我强烈建议使用SVG来创建形状，因为像这样的简单形状很容易手动创建，它具有响应性，它是widely supported now和（如@chharvey中提到的那样）评论）在语义上更合适。

＆＃13;

＆＃13;

<svg viewbox="0 0 50 50" height="56px">
  <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" />
</svg>

＆＃13;

＆＃13;

＆＃13;

您可以找到有关路径属性in the specs的更多信息。