html - 级联divs的三 Angular 形向下

在div底部创建三角形的最简单方法是什么（见图片）。

我试过使用css after方法，但是得到了重叠的三角形。我想最简单的方法也许就是在每个div上创建三角形的背景图像。

    .triangle {
  position: relative;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
  background: white;
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0px;
    margin-left: -0.5em;
    bottom: -2em;
    left: 80%;
    box-sizing: border-box;
    border: 1em solid black;
    border-color: transparent transparent white white;

    transform-origin: 0 0;
    transform: rotate(-45deg);

    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
  }

最佳答案

对于clip-path，这似乎是一个完美的工作：

.container {
 padding:20px;
 background:#dce2cc;
}
.box {
  height:200px;
  clip-path: polygon(0 0, calc(70% - 30px) 0, 70% 15%, calc(70% + 30px) 0, 100% 0, 100% 85%, calc(70% + 30px) 85%, 70% 100%, calc(70% - 30px) 85%, 0 85%);
  background-color:red;
  background-size:cover;
  background-position:center;
}
.box:first-child {
   clip-path: polygon(0 0, 100% 0, 100% 85%, calc(70% + 30px) 85%, 70% 100%, calc(70% - 30px) 85%, 0 85%);
}
.box:last-child {
    clip-path: polygon(0 0, calc(70% - 30px) 0, 70% 15%, calc(70% + 30px) 0, 100% 0, 100% 100%,0 100%);
}
.box:not(:first-child) {
   margin-top:-10px;
}

<div class="container">
  <div class="box" style="background-image:url(https://picsum.photos/500/500?image=0)"></div>
  <div class="box" style="background-image:url(https://picsum.photos/500/500?image=1069)"></div>
  <div class="box" style="background-image:url(https://picsum.photos/500/500?image=1072)"></div>
  <div class="box" style="background-image:url(https://picsum.photos/500/500?image=1052)"></div>
</div>

关于html - 级联divs的三 Angular 形向下，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52732189/