blob: 1308a6c44199e7065998822db2e216466505aae7 [file] [log] [blame]
<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,64,64);
border-top: 100px solid rgb(32,32,32);
}
#topright {
width: 0;
height: 0;
border-right: 100px solid rgb(224,224,224);
border-top: 100px solid rgb(255,255,255);
}
#bottomleft {
clear: left;
width: 0;
height: 0;
border-left: 100px solid rgb(96,96,96);
border-bottom: 100px solid rgb(128,128,128);
}
#bottomright {
width: 0;
height: 0;
border-right: 100px solid rgb(192,192,192);
border-bottom: 100px solid rgb(160,160,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>