六边形思路:使用 CSS3 绘制六边形主要使用伪类: before 和: after 在源元素之前和之后再绘制两个元素,并利用 css3 的边框样式,将这两个元素变成三角形放置在源元素的两端即可。
- <h2>
- 三角形在左右两侧
- </h2>
- <!-- 第一种方法 不兼容低版本浏览器 -->
- <div class="hexagon1">
- </div>
- <!-- 第二种方法 兼容低版本浏览器 -->
- <div class="hexagon2">
- <div class="left">
- </div>
- <div class="right">
- </div>
- </div>
- <h2>
- 三角形在上下两侧
- </h2>
- <div class="hexagon3">
- </div>
- .hexagon1{
- width: 50px;
- height: 80px;
- background-color:#6c6 ;
- position: relative;
- margin:0 auto;
- }
- .hexagon1::before{
- width: 0;
- height: 0;
- content: '';
- position: absolute;
- top: 0;
- left:-20px;
- border-right: 20px solid #6c6;
- border-top:40px solid transparent;
- border-bottom:40px solid transparent;
- }
- .hexagon1::after{
- width: 0;
- height: 0;
- content: '';
- position: absolute;
- top: 0;
- right:-20px;
- border-left: 20px solid #6c6;
- border-top:40px solid transparent;
- border-bottom:40px solid transparent;
- }
- .hexagon2{
- width: 50px;
- height: 80px;
- background-color:orange ;
- position: relative;
- margin:0 auto;
- }
- .hexagon2 .left{
- width: 0;
- height: 0;
- position: absolute;
- left: -20px;
- top: 0;
- border-right: 20px solid orange;
- border-top: 40px solid transparent;
- border-bottom: 40px solid transparent;
- }
- .hexagon2 .right{
- width: 0;
- height: 0;
- position: absolute;
- right: -20px;
- top: 0;
- border-left: 20px solid orange;
- border-top: 40px solid transparent;
- border-bottom: 40px solid transparent;
- }
- /*三角形在上下侧*/
- .hexagon3{
- width: 80px;
- height: 40px;
- background-color: blue;
- margin:0 auto;
- position: relative;
- }
- .hexagon3::before{
- width: 0;
- height: 0;
- content: '';
- position: absolute;
- top: -20px;
- left: 0;
- border-bottom: 20px solid blue;
- border-left: 40px solid transparent;
- border-right: 40px solid transparent;
- }
- .hexagon3::after{
- width: 0;
- height: 0;
- content: '';
- position: absolute;
- bottom: -20px;
- left: 0;
- border-top: 20px solid blue;
- border-left: 40px solid transparent;
- border-right: 40px solid transparent;
- }
- .sharp:before{
- content:"";
- width:0px;
- border-bottom:80px solid transparent;
- border-top:80px solid transparent;
- border-right:40px solid #6c6;
- position:absolute;
- left:-40px;
- top:0px;
- }
- .sharp{
- min-width:100px;
- height:160px;
- background:#6c6;
- display: inline-block;
- position: absolute;
- line-height: 160px;
- color:#FFFFFF;
- font-size: 20px;
- text-align: center;
- }
- .sharp:after{
- content:"";
- width:0px;
- border-bottom:80px solid transparent;
- border-top:80px solid transparent;
- border-left:40px solid #6c6;
- position:absolute;
- right:-40px;
- top:0px;
- }
- #sharpContainer{
- width:100%;
- height: 600px;
- }
- #sharpContainer .center{
- top:200px;
- left:300px;
- }
- #sharpContainer .top{
- top:20px;
- left:300px;
- }
- #sharpContainer .top-left{
- top:110px;
- left:140px;
- }
- #sharpContainer .top-right{
- top:110px;
- left:460px;
- }
- #sharpContainer .bottom{
- top:380px;
- left:300px;
- }
- #sharpContainer .bottom-left{
- top:290px;
- left:140px;
- }
- #sharpContainer .bottom-right{
- top:290px;
- left:460px;
- }
- <div id="sharpContainer">
- <div class="sharp center">
- </div>
- <div class="sharp top">
- </div>
- <div class="sharp top-left">
- </div>
- <div class="sharp top-right">
- </div>
- <div class="sharp bottom">
- </div>
- <div class="sharp bottom-left">
- </div>
- <div class="sharp bottom-right">
- </div>
- </div>
来源: