Question

是否可以仅使用四分之三的CSS创建一个圆圈？

我不能超越：

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  colour: red;
}

<div class="circle">&nbsp;</div>

Answer 1

轻松......使用边框和旋转。

.circle {
  margin: 1em auto;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-width: 20px;
  border-style: solid;
  border-color: red green blue yellow;
  transform: rotate(45deg);
}

<div class="circle"></div>

你甚至可以有彩色的空心圆圈。

.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-width: 20px;
  border-style: solid;
  border-color: red green blue yellow;
  transform: rotate(45deg);
}
.wide {
  width: 100px;
  height: 100px;
}

<div class="circle wide"></div>

或者也许是伪元素（不需要旋转），只是渐变。

*,
*::before,
*::after {
  box-sizing: border-box;
}
.circle {
  width: 100px;
  height: 100px;
  margin: 1em auto;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid pink; /* borders on it too */
}
.circle::before,
.circle::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
}
.circle::before {
  left: 0;
  background: linear-gradient(green, green 50%, yellow 50%);
}
.circle::after {
  left: 50%;
  background: linear-gradient(red, red 50%, blue 50%);
}

<div class="circle"></div>

Answer 2

当然（https://jsfiddle.net/to42ug5y/），你只能坚持4个季度：

<div id="circle">
  <div id="q1" class="quarter"></div>
  <div id="q2" class="quarter"></div>
  <div id="q3" class="quarter"></div>
  <div id="q4" class="quarter"></div>
</div>

CSS：

#circle {
  display: block;
  padding: 0;
  width: 200px;
  height: 200px;
  border: 1px;
  border-radius: 50%;
  overflow: hidden;
}
.quarter {
  display: inline-block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
}

#q1 {
  background-color: #f00;
}

#q2 {
  background-color: #0f0;
}

#q3 {
  background-color: #00f;
}

#q4 {
  background-color: #0ff;
}

Answer 3

这将为您This question

执行此操作

<强> HTML

<div id="container">
    <div id="part1-wrapper" class="cover">
        <div id="part1" class="pie"></div>
    </div>
    <div id="part2-wrapper" class="cover">
        <div id="part2" class="pie"></div>
    </div>
        <div id="part3-wrapper" class="cover">
        <div id="part3" class="pie"></div>
    </div>
    <div id="part4-wrapper" class="cover">
        <div id="part4" class="pie"></div>
    </div>
</div>

<强> CSS

#container {
    position: relative;
    width: 100px;
    height: 100px;
}

.cover {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0 100px 100px 50px);
}

.pie {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0 50px 100px 0px);
}

#part1-wrapper {
    transform: rotate(0deg);
}

#part1 {
    background-color: red;
    transform: rotate(90deg);
}
#part2-wrapper {
    transform: rotate(90deg);
}

#part2 {
    background-color: green;
    transform: rotate(90deg);
}
#part3-wrapper {
    transform: rotate(180deg);
}

#part3 {
    background-color: yellow;
    transform: rotate(90deg);
}
#part4-wrapper {
    transform: rotate(270deg);
}

#part4 {
    background-color: blue;
    transform: rotate(90deg);
}

如何创建四分之三的圆圈

3 个答案: