我不能制作 3/4 圆圈，我只能使用一个 div 所以我怎样才能像下面 link 中的示例那样制作它

Question

P.S.I我还在学习前端的东西所以你能帮我完成这个作业吗？

这是HTML代码<div>Elzero</div>

这是我尝试使用的CSS代码

* {
    box-sizing: border-box;
}

div {
width: 200px;
height: 200px;
background-color: #eee;
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
}

::after {
    content: "";
    width: 200px;
    height: 200px;
    background-color: #03a9f4;
    margin: 80px auto;
    border-radius: 50%;
    position: absolute;
    transform: translate(-190px, -80px);
    z-index: -1;
}

::before {
    content: "";
    width: 200px;
    height: 200px;
    background-color: #e91e63;
    margin: 80px auto;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    z-index: -2;
}

div:hover {
    transition: all 0.5s;
    transform: rotate(180deg);
}

Answer 1

这里还有 less 中的示例：

https://codepen.io/nikitahl/pen/XooBXd

如果你想使用 css 这里有一个转换器：

https://jsonformatter.org/less-to-css

Answer 2

由于您只能使用一个 div，此代码段基于您的想法，即拥有伪元素但使用圆锥渐变背景和 'main' div 创建它们具有使用径向渐变创建的浅灰色圆形背景。这样它就创建了这 3 个形状。

并将它们叠加起来，给人以 3/4 圆圈的印象。然后它使用 CSS 动画在悬停时旋转它们。

显然，您会想要尝试使用尺寸、动画时间和方向来获得您想要的内容，但这应该是一个开始。

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#eee 0 55%, transparent 55% 100%);
  margin: 80px auto;
  color: black;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  border-radius: 50%;
  position: relative;
}

div::after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-image: conic-gradient(#03a9f4 0deg 45deg, white 45deg 135deg, #03a9f4 135deg 360deg);
}

div::before {
  content: "";
  width: calc(100% - 10%);
  height: calc(100% - 10%);
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: -1;
  background-image: conic-gradient(#e91e63 0, #e91e63 225deg, white 225deg, white 315deg, #e91e63 315deg, #e91e63 360deg);
}

div:hover::after {
  animation: rot .4s linear;
}

div:hover::before {
  animation: rot .4s linear;
  animation-delay: .1s;
  animation-direction: reverse;
}

@keyframes rot {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(0);
  }
  100% {}
}

<div>Elzero
</div>

我不能制作 3/4 圆圈，我只能使用一个 div 所以我怎样才能像下面 link 中的示例那样制作它

I can't make the 3/4 circle and i have to use one div only so how can i make it as the example in the link below

html

css

css-shapes