div+css（实体与边框）六边形

最新推荐文章于 2023-06-21 15:43:13 发布

dada_master

最新推荐文章于 2023-06-21 15:43:13 发布

阅读量7.3k

点赞数 2

分类专栏： html+css 文章标签：布局 html

本文链接：https://blog.csdn.net/dada_master/article/details/78449730

版权

html+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

多边形实体

列举六边形

transform实现

html：

 <div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

css：

#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px; 
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px; 
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}

浮动float实现

html：

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

css：

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

多边形边框

对变形边框如何实现，如果用canvas很容易实现，但是直接拿css画一个四边形的边框圆角都很容易，但是如何画出带有钝角的边框呢，transform使用后发现并不是那么容易，roate和skew的使用无法确定（试了好久）。

那边框如何实现，简单来两个不同大小的实体的边框叠加，就可以得到多边形框了。

 <html>
      <head>
    <style>
	
#hexagon {
    top:100px;
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}
#hexagon1 {
    top:50px;
	left:5px;
    width: 90px;
    height: 45px;
    background: #333;
    position: relative;
}
#hexagon1:before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 22px solid #333;
}
#hexagon1:after {
    content: "";  /*必须写否则没有高度*/
    position: absolute;
    bottom: -22px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 22px solid #333;
}
    </style>
</head>
  <body>     
 <div id="hexagon"></div>
<div id="hexagon1"></div>
    
  </body>
  </html>