如何在 CSS 中制作多边形 div

Question

我能够在 CSS 中制作一个普通的方形 div 和一个三角形 div。但我不知道如何用单个 div 制作这样的形状。谁能帮我吗 ？

我也希望它扩展到它的父级的整个宽度，但是 border 属性不支持百分比。 （例如 border-left: 160px solid transparent; ）

 .container{
  width: 100%;
  position: relative;
}

.v-div {
  width: 0;
  height: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-top: 100px solid #f00;
}

.box{
   height: 80px;
   width: 320px;
   background: red;
}

 <div class="container">
    <div class="box">
    </div>
    <div class="v-div">
    </div>
</div>

原文由 mrid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 :after 伪类来完成。如果您取消注释 :before 在此示例中，您将得到一个六边形

 #hexagon{
  position: relative;
  height:100px;
  width:50%;
  color: white;
  background: green;
  padding-bottom: 15%;
  overflow:hidden;
  background-clip: content-box;
}
#hexagon:after {
  content: "";
  position: absolute;
  top:100px;
  left: 0;
  background-color:green;
  padding-bottom: 50%;
  width: 57.7%;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}

 <div id="hexagon"></div>

原文由 ab29007 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用剪辑路径 css 属性

 #clippedDiv{
    width:200px;
    height:200px;
    background-color:red;
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0
}

 <div id="clippedDiv"></div>

如需更多形状，您可以访问 http://bennettfeely.com/clippy/

原文由 Mahmudur Rahman 发布，翻译遵循 CC BY-SA 3.0 许可协议