html - 我如何添加div的平滑三 Angular 形底部

Question

我有一个盒子，我需要在 div 的底部放置光滑的三 Angular 形，但我无法实现我想要的效果，我该如何像下图那样做？

.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. 使用“变换原点:左上角；”你需要保持主容器的 .corner == 高度的顶部(不知道为什么，但 bottom:0 不起作用，也许你会解决这个)
2. .corner 应该是方形的(width=height)，为了保持平滑，你需要保持比率 width(.corner) = width(.slide-box)*sqrt(2)。表示 Angular 对 Angular 线的宽度应等于主容器的宽度。