How to make the "cracks" go behind the bordered div? - css

Question

Fiddle: https://jsfiddle.net/4taucsx3/6/
I want the cracks to go behind the dark border but I can't seem to be able to do so no matter how I do it. I don't want the overflowing svg points to show. How can I achieve this?
Here's my attempt at this:
<div class="outer">
<div class="inner">
<div class="compass-display">
<svg class="pr-arrow">
<polygon points="200,30 235,210 200,240 165,210" />
</svg>
<svg class="sec-arrow">
<polygon points="200,370 235,210 200,240 165,210" />
</svg>
<svg class="arrows-shadow">
<polygon points="205,370 245,210 205,35 180,210" />
</svg>
<svg class="arrows-overlay">
<polygon points="200,370 200,210 200,35 165,210" />
</svg>
</div>
<div class="compass-cracks">
<svg>
<polygon points="120,400 0,320 0,190 60,225 60,180 90,170 110,200 120,170 160,180 170,130 220,130 250,80 280,100 350,40 430,180 380,180 390,200 370,220 330,200 350,240 310,210 290,310 260,270 210,320 200,280 180,320 160,300 120,400" />
</svg>
</div>
</div>
<div class="arrows-dot"></div>
</div>
.outer {
position: relative;
width: 600px;
height: 600px;
border-radius: 50%;
background-color: #cfe7f7;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border: 50px solid black;
border-radius: 50%;
box-sizing: border-box;
z-index: 1001;
}
.compass-display {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #fcfffe;
box-sizing: border-box;
> svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: inherit;
height: inherit;
z-index: 1000;
&:nth-of-type(3) {
z-index: 999;
}
}
}
.compass-cracks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
> svg {
width: inherit;
height: inherit;
fill: #cfe7f7;
}
}
.arrows-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
z-index: 1002;
}
.pr-arrow {
fill: #d14b4b;
}
.sec-arrow {
fill: #1671ad;
}
.arrows-shadow {
fill: grey;
}
.arrows-overlay {
fill: rgba(0, 0, 0, 0.2);
}

Answer 1

I suggest you add " overflow: hidden; " to your .inner class, just as follows :
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border: 50px solid black;
border-radius: 50%;
box-sizing: border-box;
z-index: 1001;
overflow: hidden;
}
Here's the result : https://jsfiddle.net/5hf6bvdg/2/

Answer 2

You can change css class compass-cracks to following code:
.compass-cracks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
> svg {
width: inherit;
height: inherit;
fill: #cfe7f7;
}
}