1 自己硬拼起来的(transform属性)
CSS
.box1{
width: 58px;
height: 96px;
border-top: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(60deg);
margin-left: 60px;
}
.box3{
width: 58px;
height: 96px;
border-top: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(-60deg);
margin-left: 60px;
margin-top: -98px;
float: left;
}
.box2{
width: 57px;
height: 98px;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: -99px;
margin-left: 60px;
}
DIV
<div class="box1"></div>
<div class="box3"></div>
<div class="box2"></div>
结果
2 transparent属性
CSS
.box1{
width:0;
border-right: 30px solid red;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;
float: left;
}
.box2{
width: 60px;
height: 104px;
background-color: red;
float: left;
}
.box3{
width:0;
border-left: 30px solid red;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;
float: left;
}
DIV
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
结果