我需要在左下角创建一个带有箭头的框。我的问题是得到不对称三 Angular 形。
这里是盒子底部边框的例子,在左下角有一个三 Angular 形:
这是我目前的尝试:
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-bottom:after {
content: " ";
position: absolute;
left: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
}
<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div>
最佳答案
我稍微编辑了边框宽度,并添加了 transform: skewX()
。您可以使用适量的偏斜来玩。
此外,:after
更改为 :before
并且我使用了 left
属性并删除了 right
。
希望对您有所帮助:
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-bottom:before {
content: " ";
position: absolute;
left: 8px;
bottom: -15px;
border-top: 15px solid black;
border-right: 0px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
transform: skewX(20deg);
}
<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div>
关于html - 如何在盒子的左下角创建一个不对称三 Angular 形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55825622/