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

概述在div底部使用三角形创建以下(参见图像)最简单的方法是什么. 我尝试过使用css方法,但得到重叠的三角形.我想最简单的方法就是在每个div上创建三角形的背景图像. .triangle { position: relative; margin: 0; padding: 1em; box-sizing: border-box; background: white; box-s 在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.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.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,0 85%);}.Box:last-child {    clip-path: polygon(0 0,100% 100%,0 100%);}.Box:not(:first-child) {   margin-top:-10px;}

<div >  <div  ></div>  <div  ></div>  <div  ></div>  <div  ></div></div>

总结

以上是内存溢出为你收集整理的html – 级联div与三角形指向下方全部内容，希望文章能够帮你解决html – 级联div与三角形指向下方所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。