html – 如何在CSS中创建多边形div

概述我能够在CSS中创建一个普通的方形div和一个三角形div.但我不知道如何用一个div制作这样的形状.谁能帮我吗 ？ 此外,我希望它扩展到它的父级的整个宽度,但边框属性不支持百分比. (例如border-left：160px solid transparent;) .container{ width: 100%; position: relative;}.v-div { widt 我能够在CSS中创建一个普通的方形div和一个三角形div.但我不知道如何用一个div制作这样的形状.谁能帮我吗 ？

此外,我希望它扩展到它的父级的整个宽度,但边框属性不支持百分比. (例如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 >    <div >    </div>    <div >    </div></div>

解决方法 你可以用：在伪类之后.如果取消注释：在此示例之前,您将获得六边形

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

总结

以上是内存溢出为你收集整理的html – 如何在CSS中创建多边形div全部内容，希望文章能够帮你解决html – 如何在CSS中创建多边形div所遇到的程序开发问题。

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