代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
height: 500px;
border: 1px solid #000000;
position: relative;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.roll_box{
height: 100%;
position: relative;
margin: 0 auto;
padding: 0;
float: left;
}
.roll_box>ul{
padding: 0;
margin: 0;
display: flex;
flex-flow: row nowrap;
}
.roll_box>ul>li{
width: 200px;
height: 100%;
padding: 0;
list-style: none;
border: 1px solid #000000;
box-sizing: border-box;
}
.li_head{
width: 100%;
height: 200px;
background: #504044;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.li_center{
width: 100%;
height: 50px;
background: #d1c5ca;
text-align: center;
line-height: 50px;
font-size: 16px;
}
.li_footer{
width: 100%;
height: 250px;
background: #2fc1ff;
}
.hexa{
width: 96px;
height: 120px;
overflow: hidden;
transform: rotate(120deg);
margin: auto;
position: relative;
}
.hexa_child{
width: 100%;
height: 100%;
transform: rotate(-60deg);
overflow: hidden;
}
.hexa_child_child{
width: 100%;
height: 100%;
transform: rotate(-60deg);
overflow: hidden;
background-color: red;
}
.hexa_text{
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>