میخواهم دو قسمتی که در تصویر مشخص شده به جای دایره، شش ضلعی شوند
اینها کد CSS مربوطه هستند (به جای http://path//to/file.jpg آدرس کامل عکس رو وارد کنید):
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(http://path//to/file.jpg);
background-size: auto 346.4102px;
background-position: center;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
به این ترتیب در قالب مربوطه وارد کنید:
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
