三角形有一个圆角

Question

我想只为一个三角形制作一个圆角,但我无法制作它.
这是我的代码:

.arrow-left {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  border-right: 80px solid blue;
}

<div class="arrow-left"></div>

我需要左边的角落圆角,如下图所示:

Answer 1

我知道这有点像hacky,但我不认为有一个简单的方法可以用一个单独的类来做到这一点.

我所做的就是将一个方框旋转45度,border-radius:10px然后将其包含在另一个div中,其宽度设置为箭头所需的宽度,overflow:hidden以便溢出的所有内容都是不可见的.

http://jsfiddle.net/9D3Zn/5/

.arrow-left {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 20px;
  background: black;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}

.cover {
  position: absolute;
  height: 100px;
  width: 40px;
  overflow: hidden;
}

Answer 2

您可以使用至少2种方法制作具有圆角的响应三角形:

使用CSS:

使用一个div和一个伪元素和:

• 绝对定位
• 的填充技术,以保持三角宽高比
• 2d变换
• overflow:hidden;
• 制作三角形的变换技术

.arrow-left {  
  position: relative;
  width: 15%;
  padding-bottom:15%;
  border-radius: 10px;
  overflow: hidden;
  transform-origin:100% 0;
  transform: rotate(-45deg);
}
.arrow-left:after {
  content: "";
  position: absolute;
  top: 0; right:8px;
  width:100%; height:141%;
  transform-origin:inherit;
  transform: rotate(45deg);
  background:#000;
}

<div class="arrow-left"></div>

请注意,您需要将供应商前缀添加到transform和transform-origin属性(有关canIuse的更多信息)

使用内联SVG:

此示例为三角形使用一个路径元素,并为圆角(在属性中)使用贝塞尔曲线命令:Q0 5 0.8 4.2d

svg{
  display:block;
  width:10%;
}

<svg viewbox="0 0 5 10">
  <path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>