z-index在形状的一半位置上是什么意思？

Question

z-index在形状的一半位置上是什么意思？

4

我想做如下形状:

我已经尝试了，但是如何将它们混合在一起呢:

.clal-loader{
  display:flex;
}
.clal-loader div{
  border: 10px solid #38477e;
  border-left: 0;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  width: 30px;
  height: 30px;
}
.clal-loader div:nth-child(1){
   border-color:#0cabec;
}

.clal-loader div:nth-child(2){
 transform: rotate(-180deg);
     position: absolute;
    left: 25px;
    z-index: -1;
}

<div class="clal-loader">
  <div></div>
  <div></div>
</div>

- לבני מלכה

你想要渐变的颜色还是只要一个颜色？ - Temani Afif

1

你不能只用两个元素和纯CSS实现这个效果。你需要使用SVG图像或将其中一个元素分成两个来实现。每个元素只能有一个z-index。 - ssc-hrep3

@TemaniAfif 我不是指颜色，我是指天蓝色插入到底部的蓝色。 - לבני מלכה

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

我建议使用radial-gradient和只有一个元素，如下所示。基本上它们是四个类似的渐变色，每个渐变色创建一个四分之一圆形，并调整顺序以得到最终的形状：

.box {
  width:100px;
  height:150px;
  background:
    radial-gradient(circle at bottom left, transparent 40%,blue  40%, blue  60%,transparent 61%) top,  
    radial-gradient(circle at bottom right,transparent 40%,green 40%, green 60%,transparent 61%) top,
    radial-gradient(circle at top right,   transparent 40%,green 40%, green 60%,transparent 61%) bottom,
    radial-gradient(circle at top left,    transparent 40%,blue  40%, blue  60%,transparent 61%) bottom;
    
  background-size:100% 50%;
  background-repeat:no-repeat;
  
}

<div class="box">

</div>

使用两个元素，可以考虑每个div的伪元素来创建与第一个代码相同的效果，然后您只需要调整z-index。

.box {
  width:100px;
  height:100px;
  position:relative;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.box > div:before,
.box > div:after {
  content:"";
  position:absolute;
  width:70%;
  height:50%;
}

.box > div:first-child {
  color:red;
}

.box > div:last-child {
  color:blue;
}

.box > div:first-child::before {
  z-index:1;
  top:0;
  left:0;
  border-top:15px solid;
  border-right:15px solid;
  border-top-right-radius:100%;
}
.box > div:first-child::after {
  bottom:0;
  left:0;
  border-bottom:15px solid;
  border-right:15px solid;
  border-bottom-right-radius:100%;
}
.box > div:last-child::before {
  top:0;
  right:0;
  border-top:15px solid;
  border-left:15px solid;
  border-top-left-radius:100%;
}
.box > div:last-child::after {
  bottom:0;
  right:0;
  border-bottom:15px solid;
  border-left:15px solid;
  border-bottom-left-radius:100%;
}

*,*::before,*::after {
  box-sizing:border-box;
}

<div class="box">
  <div></div>
  <div></div>
</div>