html – z-index的一半形状_html-js-css

概述我想塑造如下：我到目前为止尝试了但是如何将它们混合在一起： .clal-loader{ display:flex;}.clal-loader div{ border: 10px solid #38477e; border-left: 0; border-bottom-right-radius: 100px; border-top-right-radius: 100px; 我想塑造如下：

我到目前为止尝试了但是如何将它们混合在一起：

.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 >  <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,green 40%,green 60%,radial-gradIEnt(circle at top right,transparent 61%) bottom,radial-gradIEnt(circle at top left,transparent 61%) bottom;      background-size:100% 50%;  background-repeat:no-repeat;  }

<div ></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;}