html – 级联div与三角形指向下方

2024年2月4日 206次阅读

在div底部使用三角形创建以下(参见图像)最简单的方法是什么.

《html – 级联div与三角形指向下方》

我尝试过使用css方法,但得到重叠的三角形.我想最简单的方法就是在每个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);
  }

最佳答案 这似乎是剪辑路径的完美工作：

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