116 lines
3.0 KiB
HTML
116 lines
3.0 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
width: 200px;
|
|
height: 200px;
|
|
float: left;
|
|
}
|
|
|
|
#topleft {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 50px solid green;
|
|
border-right: 50px solid orange;
|
|
border-top: 50px solid orange;
|
|
}
|
|
#topright {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 50px solid orange;
|
|
border-right: 50px solid lime;
|
|
border-top: 50px solid lime;
|
|
}
|
|
#topmiddleleft {
|
|
width: 0;
|
|
height: 0;
|
|
clear: left;
|
|
border-left: 50px solid green;
|
|
border-right: 50px solid orange;
|
|
border-bottom: 50px solid green;
|
|
}
|
|
#topmiddleright {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 50px solid orange;
|
|
border-right: 50px solid lime;
|
|
border-bottom: 50px solid orange;
|
|
}
|
|
|
|
#bottommiddleleft {
|
|
width: 0;
|
|
height: 0;
|
|
clear: left;
|
|
border-left: 50px solid blue;
|
|
border-right: 50px solid green;
|
|
border-top: 50px solid green;
|
|
}
|
|
#bottommiddleright {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 50px solid green;
|
|
border-right: 50px solid orange;
|
|
border-top: 50px solid orange;
|
|
}
|
|
#bottomleft {
|
|
width: 0;
|
|
height: 0;
|
|
clear: left;
|
|
border-left: 50px solid blue;
|
|
border-right: 50px solid green;
|
|
border-bottom: 50px solid blue;
|
|
}
|
|
#bottomright {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 50px solid green;
|
|
border-right: 50px solid orange;
|
|
border-bottom: 50px solid green;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
}
|
|
.x1 {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(0% 45%,55% 100%,45% 100%,0% 55%);
|
|
}
|
|
#x1 {
|
|
background-color:black;
|
|
}
|
|
.x2 {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(0% 0%, 5% 0%, 100% 95%, 100% 100%, 95% 100%,0% 5%);
|
|
}
|
|
#x2 {
|
|
background-color:black;
|
|
}
|
|
.x3 {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(55% 0%, 100% 45%, 100% 55%,45% 0%);
|
|
}
|
|
#x3 {
|
|
background-color:black;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<div class="box">
|
|
<div id="topleft"></div>
|
|
<div id="topright"></div>
|
|
<div id="topmiddleleft"></div>
|
|
<div id="topmiddleright"></div>
|
|
<div id="bottommiddleleft"></div>
|
|
<div id="bottommiddleright"></div>
|
|
<div id="bottomleft"></div>
|
|
<div id="bottomright"></div>
|
|
</div>
|
|
<div id="x1" class="x1"></div>
|
|
<div id="x2" class="x2"></div>
|
|
<div id="x3" class="x3"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|