z-index 在形状的一半
z-index in half of shape
我想做如下形状:
到目前为止我都试过了,但我怎样才能将它们混合在一起:
.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>
我会考虑径向渐变,并且只有一个元素如下所示。基本上它们是 4 个相似的渐变,每个渐变创建一个四分之一圆,您调整顺序以获得最终形状:
.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>
我想做如下形状:
到目前为止我都试过了,但我怎样才能将它们混合在一起:
.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>
我会考虑径向渐变,并且只有一个元素如下所示。基本上它们是 4 个相似的渐变,每个渐变创建一个四分之一圆,您调整顺序以获得最终形状:
.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>