如何在CSS中制作多边形div [英] How to make a polygon div in CSS

问题描述

我可以在CSS中制作一个正方形div和一个三角形div。但我不知道如何用一个div来制作这样的形状。任何人都可以帮助我？

另外我想这扩展到它的父母的整个宽度，但 border 属性不支持百分比。 （例如 border-left：160px solid transparent; ）

  .container {width：100％; position：relative;}。v-div {width：0;身高：0; border-left：160px纯透明; border-right：160px solid transparent; border-top：100px solid＃f00;}。box {height：80px; width：320px;背景：红色;}  

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

解决方案

你可以在伪类之后使用来完成。如果您在本例中取消注释：之前，您将得到一个六角形

$ b

  #hexagon {position：relative;高度：100像素;宽度：50％;白颜色;背景：绿色;填充底部：15％;溢出：隐藏; background-clip：content-box;}＃hexagon：after {content：;位置：绝对;顶：100px的;左：0;背景色：绿色;填充底部：50％;宽度：57.7％; transform-origin：0 0; transform：rotate（-30deg）skewX（30deg）;}  

< div id =hexagon>< / div>

I am able to make a normal square div and a triangle div in CSS. But I don't know how to make such a shape with a single div. Can anyone help me out ?

Also I want this to spread to the entire width of it's parent but border properties don't support percentages. ( eg 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>

解决方案

you can do it with :after pseudo classes. If you uncomment the :before in this example you get a hexagon

#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>

这篇关于如何在CSS中制作多边形div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！