css – 带有一个圆角的三角形

前端之家收集整理的这篇文章主要介绍了css – 带有一个圆角的三角形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想只为三角形制作一个圆角,但我无法制作它.
这是我的 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>

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

解决方法

我知道这有点hacky,但我不认为有一个简单的方法来做一个单一的课程.

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

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

猜你在找的CSS相关文章