切角矩形区域与六边形区域

Posted 2020-09-19

切角矩形区域

<div class="one">
<div class="two">
</div>
</div>

.one{
width:300px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
position: relative;
transform: rotate(45deg);
overflow: hidden;
visibility: hidden;
}
.two{
width: 300px;
height: 200px;
border: 1px solid blue;
position: absolute;
top: 50px;
transform: rotate(-45deg);
visibility: visible;
}
注意要点：one div包含two div ,第一个div旋转45deg，第二个反向旋转45deg

然后设置第一个div visibility属性为hidden overflow为hidden .

visibility属性是指是否可见，属性值有hidden与visible overflow指超出部分，最常见的是在滚动条的使用上使用这个属性。

　　　　　　第二个div设置可见即可。

最综效果

六边形区域

<div class="one">
<div class="two">
<div class="three" style="background-image: url(img/owl1.jpg);">　　
</div>
</div>
</div>

用到3个div 长宽比4：5的div 

.one{
transform:rotate(120deg);
visibility: hidden;
}
.two{
transform:rotate(-60deg);
float: left;
visibility: hidden;
}
.three{
transform:rotate(-60deg);
visibility: visible;
position: relative;
}

第一个旋转120deg 第二个旋转-60 第三个旋转-60 

然后设置所有的overflow隐藏，第一二个不可见，第三个可见即可。

注意，此时第三个div中有东西的时候，如图片才能显示出效果。