级联divs的三角形向下

Question

最简单的方法是在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);
  }

Answer 1

对于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>

Answer 2

您可以使用CSS :after和:before来实现此目的，请参见下面的工作片段

body{
	background:rgb(220, 226, 204);
}
.arrow {
	position: relative;
	background: #fff;
    height:100px;
    margin-top:10px;
}
.arrow:after, .arrow:before {
    top: 88%;
    left: 80%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0px 12px 0px rgb(220, 226, 204));
    -webkit-filter: drop-shadow(0px 12px 0px rgb(220, 226, 204));
}

.arrow:after {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #fff;
    border-width: 35px;
    margin-left: -35px;
}
.arrow:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #fff;
	border-width: 38px;
	margin-left: -38px;
}
.arrow.no-arrow:after,.arrow.no-arrow:before{
	display:none;
}

   
<div class="arrow">
  content goes here
</div>
<div class="arrow">
  content goes here
</div>
<div class="arrow no-arrow">
  content goes here
</div>