css部分
//设置背景图层
.box{
width: 300px;
height: 300px;
background-color: blue;
position: relative;
top: 60px;
left: 180px;
}
.tux1{
width: 40px;
height: 130px;
position: absolute;//定位
border-radius: 30px 30px 0px 0px;//设置圆角四个边
border: 10px solid red;//设置边框大小颜色
top: 97px;
left:307px;
transform: rotate(45deg);//设置角度
}
.tux2{
width: 40px;
height: 130px;
position: absolute;
border-radius: 30px 30px 0px 0px;
border: 10px solid red;
top: 97px;
left: 307px;
transform: rotate(-45deg);
}
.tux3{
width: 40px;
height: 130px;
position: absolute;
border-radius: 30px 30px 0px 0px;
border: 10px solid red;
top: 162px;
left: 305px;
transform: rotate(135deg);
}
.tux4{
width: 40px;
height: 130px;
position: absolute;
border-radius: 30px 30px 0px 0px;
border: 10px solid red;
top: 162px;
left: 309px;
transform: rotate(225deg);
}
.tux5{
width: 40px;
height: 40px;
position:absolute;
border-radius: 30px 0px 30px 30px;
border: 10px solid red;
top: 174px;
left: 203px;
transform:rotate(45deg);
}
.tux6{
width:40px;
height:40px;
position:absolute;
border-radius:30px 30px 30px 0px;
border:10px solid red;
top: 174px;
left: 411px;
transform: rotate(45deg);
}
HTML部分
<div class="box"></div>
<div class="tux1"></div>
<div class="tux2"></div>
<div class="tux3"></div>
<div class="tux4"></div>
<div class="tux5"></div>
<div class="tux6"></div>
效果图