带一个圆角的三角形 [英] Triangle with one rounded corner

问题描述

我只想为三角形一个圆角，但我无法创建。

这里是我的

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

I want to make only one rounded corner for a triangle but I'm unable to make it.
Here is my code:

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

I need the corner pointing left to be rounded as shown in this image :

解决方案

I know this is a little hacky, but I don't think there is an easy way to do this with a single class.

All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

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

这篇关于带一个圆角的三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！