<div class="outside">
<div class="inside"></div>
</div>
.outside {
position: relative;
width: 70vmin;
height: 70vmin;
background: tomato;
-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
.inside {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: white;
-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
background: papayawhip;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.