如何在盒子的左下角创建不对称三角形？

Question

我需要创建一个在左下角带有箭头的框。我的问题是得到不对称三角形。

下面是一个框的底部边框的示例，该框的左下角有一个三角形：

这是我到目前为止的尝试：

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

Answer 1

我稍微编辑了边框宽度，并添加了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>

Answer 2

在下面的代码中编写以生成箭头

.box {
position: relative;
background: #00aabb;
border-radius: .4em;
}

.box:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-right: 0;
margin-left: -10px;
margin-bottom: -20px;
}

Answer 3

这是一个使用多种背景并依靠conic-gradient() ¹

的想法

.box {
  width: 150px;
  height: 75px;
  background: 
    conic-gradient(transparent 314deg, black 315deg,black 340deg,transparent 342deg)
    bottom -30px left 0/60px 60px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

这里仅是渐变，以更好地了解其工作原理：

.box {
  width: 60px;
  height: 60px;
  background: 
    conic-gradient(red 314deg, black 315deg,black 340deg,red 342deg)
}

<div class="box">
</div>

^{1：实际上仅在chrome上受支持}

---

另一个带有linear-gradient但不透明的想法：

.box {
  width: 150px;
  height: 75px;
  background: 
    linear-gradient(to bottom left,transparent 49%,#fff 50%) bottom 0 left 0/30px 30px border-box,
    linear-gradient(250deg, transparent 10px,#000 11px) bottom 0 left 0/30px 30px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Answer 4

您可以使用SVG作为伪元素的背景，例如

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -30px;
  width: 22px;
  height: 30px;
  color: #000;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 22 30" 
                   xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink" >
                   <path d="M0 0 L22 30 L15 0 z" fill="%23000" /></svg>');
} 

  

Example Codepen

Answer 5

我已用transform:rotate和border更新了CSS，请检查它

.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;
  right: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 15px solid transparent;
  border-left: 0px solid black;
  border-bottom: none;
  transform: rotate(20deg);
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: rotate(-20deg);
}

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>