| <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> |
