最近有个需求需要实现一堆这种五颜六色的六边形作为气泡容器,于是就参考网上的思路写了一个这样的六边形。
效果图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
}
.rect_container_qipao {
margin: 50px auto;
transform: rotateZ(270deg);
}
.rect_container_qipao,
.h_c_rect_container,
.h_c_rect_c_middler,
.h_c_rect_c_item,
.border_six_one,
.border_six_two {
width: 250px;
height: 200px;
}
.h_c_rect_container,
.h_c_rect_c_middler,
.h_c_rect_c_item {
overflow: hidden;
}
/* 这里的高度需要降低一些,让边框可以看到 */
.border_six_one,
.border_six_two {
height: 198px;
}
.h_c_rect_container,
.h_c_rect_c_middler {
visibility: hidden;
}
.rect_container_qipao .h_c_rect_container {
margin-left: 10px;
float: left;
transform: rotate(120deg);
}
.h_c_rect_container .h_c_rect_c_middler {
transform: rotate(-60deg);
}
.h_c_rect_c_item,
.border_six_one,
.border_six_two {
box-shadow: 0px 0px 17px 2px rgba(51, 238, 63, 0.6) inset;
border: 1px solid rgba(51, 238, 63, 1);
}
.h_c_rect_c_item {
position: relative;
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
visibility: visible;
}
.border_six_one {
position: absolute;
left: 0;
top: 0;
transform: rotateZ(60deg);
}
.border_six_two {
position: absolute;
left: 0;
top: -3px;
transform: rotateZ(120deg);
}
.rect_text {
display: flex;
flex-direction: column;
position: absolute;
left: -20%;
top: -14%;
width: 200px;
height: 250px;
transform: rotateZ(90deg);
color: #fff;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="rect_container_qipao">
<div class="h_c_rect_container">
<div class="h_c_rect_c_middler">
<div class="h_c_rect_c_item">
<div class="border_six_one"></div>
<div class="border_six_two"></div>
<div class="rect_text">
<!-- 展示的内容 -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>