如何在盒子的左下角创建不对称三角形? [英] How to create an asymmetric triangle at the bottom left corner of a box?
本文介绍了如何在盒子的左下角创建不对称三角形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要创建一个在左下角带有箭头的框。我的问题是得到不对称的三角形。
I need to create a box with an arrow at the left bottom corner. My problem is to get the asymmetric triangle.
在下面的示例中,框的底部边框的左下角有一个三角形:
Here an example for the bottom border of the box with an triangle at the left bottom corner:
这是我到目前为止的尝试:
This is my attempt so far:
.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一起玩
属性,并删除了权利
。
希望对您有所帮助:
I edited the border width a bit, and added transform: skewX()
. You may play with the right amount for the skew.
In addition the :after
changed to :before
and I played with left
property and removed the right
.
hope it helps:
.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>
这篇关于如何在盒子的左下角创建不对称三角形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文