68 lines
1.9 KiB
HTML
68 lines
1.9 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
width: 200px;
|
|
height: 200px;
|
|
float: left;
|
|
}
|
|
/*tweak this until it's actually right... */
|
|
#topleft {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 100px solid rgb(64,87,64);
|
|
border-top: 100px solid rgb(32,32,32);
|
|
}
|
|
#topright {
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 100px solid rgb(225,246,225);
|
|
border-top: 100px solid rgb(254,254,254);
|
|
}
|
|
#bottomleft {
|
|
clear: left;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 100px solid rgb(96,135,96);
|
|
border-bottom: 100px solid rgb(128,175,128);
|
|
}
|
|
#bottomright {
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 100px solid rgb(193,231,193);
|
|
border-bottom: 100px solid rgb(160,207,160);
|
|
}
|
|
.box {
|
|
position: absolute;
|
|
}
|
|
.x {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(0% 0%, 0% 10%, 40% 50%, 0% 90%, 0% 100%, 10% 100%, 50% 60%, 90% 100%, 100% 100%, 100% 90%, 60% 50%, 100% 10%, 100% 0%, 90% 0%, 50% 40%, 10% 0%);
|
|
}
|
|
#x {
|
|
background-color:white;
|
|
}
|
|
.plus {
|
|
position: absolute;
|
|
-webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
|
|
}
|
|
#plus {
|
|
background-color:white;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<div class="box">
|
|
<div id="topleft"></div>
|
|
<div id="topright"></div>
|
|
<div id="bottomleft"></div>
|
|
<div id="bottomright"></div>
|
|
</div>
|
|
<div id="x" class="x"></div>
|
|
<div id="plus" class="plus"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|