本文介绍了带一个圆角的三角形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只想为三角形一个圆角,但我无法创建。
这里是我的
.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.
.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;
}
这篇关于带一个圆角的三角形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!