三角形有一个圆角

Question

我想只为制作一个三角形的圆角，但我无法制作它。
这是我的code：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如左图所示，我需要将其指向圆角，如下图所示：

Answer 1

我知道这有点像hacky，但我认为单一课程没有一种简单的方法可以做到这一点。

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

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

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

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

Answer 2

你可以制作一个响应三角形，带有一个圆角，至少有两种方法：

使用CSS：

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

• 绝对定位
• padding technique以保持三角形宽高比
• 2d transforms
• overflow:hidden;
• 制作三角形的transform technique

.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：

此示例使用一个path元素作为圆角的bezier curve command三角形（Q0 5 0.8 4.2属性中的d）：

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>

Answer 3

您可以尝试并根据您的需要进行修改。

http://jsfiddle.net/K44mE/947/

<div id="player">

  <div id="outer"><div id="inner">&nbsp;</div></div>

</div>

#player {
 margin: 32px;
 position: relative;        
 width: 400px;
 height: 250px;
 background-color: #222;   
}


#inner{
 transform: rotate(45deg);
 -ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -moz-transform: rotate(45deg); 
 background-color:silver;
 width:100px;
 height:100px;
 top: 20px;
 left: -60px;
 position:relative;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

#outer {
 position: absolute;
 top: 50px;
 left: 165px;
 width: 70px;
 height: 140px;    
 overflow: hidden;
}

Answer 4

添加此

代码

border-radius:10px

Answer 5

使用overflow: hidden;

.corner {
 position: absolute;
 border-radius: 4px;
 overflow: hidden;
 top: 0em;
 right: 0em;
 margin: 0em;
 padding: 0em;
 text-align: center;
 border-color: #E8E8E8;
 width: 4em;
 height: 4em;
 z-index: 1;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }

.corner:after {
 position: absolute;
 content: "";
 right: 0em;
 top: 0em;
 z-index: -1;
 width: 0em;
 height: 0em;
 background-color: transparent !important;
 border-top: 0em solid transparent;
 border-right: 4em solid transparent;
 border-bottom: 4em solid transparent;
 border-left: 0em solid transparent;
 border-right-color: inherit;
 -webkit-transition: border-color 0.1s ease;
 transition: border-color 0.1s ease;
 }