如何使 "cracks" 位于带边框的 div 后面？

Question

Fiddle: https://jsfiddle.net/4taucsx3/6/

我想让裂缝在深色边框后面，但我怎么都做不到。我不想显示溢出的 svg 点。我怎样才能做到这一点？

这是我的尝试：

<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

我建议您将“overflow: hidden;”添加到您的 .inner class，如下所示：

   .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;
}

结果如下：https://jsfiddle.net/5hf6bvdg/2/

Answer 2

您可以将 css class compass-cracks 更改为以下代码：

.compass-cracks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;

    > svg {
        width: inherit;
        height: inherit;
        fill: #cfe7f7;
    }
}

如何使 "cracks" 位于带边框的 div 后面？

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

css

svg

z-index