如何添加div的平滑三角形底部

Question

我有一个盒子，我需要在div的底部放一个光滑的三角形，但是我无法实现，因为我想如何像下面的图像一样做到这一点？

.slide-box {
  position: relative;
  display: inline-block;
  background: #e41113;
  border: 1px solid #df2b2c;
  border-radius: 6px;
}

.slide-box a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 10px;
}

.slide-box:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 25px solid #df2b2c;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

<div class="slide-box">
  <a href="#">
          I'm a super <br>box!                     
 </a>
</div>

Answer 1

我不确定您是否可以使用:: after来完成所需的操作。 但是也许您可以在底部的绝对定位元素上使用过渡旋转和缩放。

这里是概念：

.slide-box {
  position: relative;
  display: inline-block;
  background: #e41113;
  border: 1px solid #df2b2c;
  border-radius: 6px;
  width: 145px;
  height: 70px;
}

.slide-box a {
  display: block;
  color: #fff;
  background: #e41113;
  display: block;
  text-decoration: none;
  padding: 12px 10px;
  z-index:1000;
}

.slide-box .corner {
  position: absolute;
  top: 70px;
  left: 0px;
  width: 103px;
  height: 103px;
  background-color: #e41113;
  transform-origin: top left;
  transform: scale(1, 0.25) rotate(-45deg);
  border-radius: 6px;
}

<div class="slide-box">
  <a href="#">
          I'm a super <br>box!                     
 </a>
  <div class="corner"></div>
</div>

当然，主要任务是定位。

因此，您需要2个先决条件：

1. 使用“ transform-origin：左上方；”您需要将主容器的高度保持在.corner ==的顶部（不知道为什么，但是bottom：0不起作用，也许您会解决 这个）
2. .corner应该是正方形（宽度=高度），并且要使其平滑，您需要保持比率width（.corner）= width（.slide-box）* sqrt（2）。表示角落对角线的宽度应等于主容器的宽度。

Answer 2

这是一种方法：

.container {
  width: 300px;
}
.slide-box {
  height: 200px;
  width: 100%;
  position: relative;
	background-color: #df2b2c;
	text-align: left;
  margin-left: 70px;
  margin-bottom: -75px;
  border-radius: 0 0 25% 25%;
}
.slide-box a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 12px 10px;
}
.corner {
	position: relative;
	background-color: #df2b2c;
	text-align: left;
  margin-left: 95px;
}
.corner:before,
.corner:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.corner,
.corner:before,
.corner:after {
	width:  165px;
	height: 165px;
	border-top-right-radius: 30%;
}

.corner {
	transform: rotate(-120deg) skewX(-30deg) scale(1,.866);
}
.corner:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.corner:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

<div class="container">
<div class="slide-box">
  <a href="#">
          I'm a super <br>box!                     
 </a>
</div>
<div class="corner"></div>
</div>