css：将div圆形圆圈添加到3/4的边框

Question

我有这样的代码：

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

和css：

.circle {
 border-left: 1px solid red;
 border-bottom: 1px solid red;
 border-radius: 200px;
 width: 200px;
 height: 200px;
}

但我得到了这样的边界：

我怎么能得到一个直的圆形边框？

我的意思是这样的：

是否可以使用css？

Answer 1

Svg圈

使用svg创建一个3/4的圆圈只需几行代码：

＆＃13;

＆＃13;

#cut-circ {
  stroke-dasharray: 110;
  stroke-dashoffset: 0;
}

＆＃13;

<svg id="cut-circ" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="23" stroke="red" fill="gray" />
</svg>

＆＃13;

＆＃13;

＆＃13;

或css

＆＃13;

＆＃13;

.circ {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: inline-block;
  background-color: gray;
  border-top: 3px solid transparent;
  border-left: 3px solid red;
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  transform: rotate(45deg);
}

＆＃13;

<div class="circ"></div>

＆＃13;

＆＃13;

＆＃13;

  

评论如果我在那里有文字的内部跨度怎么办？

带文字的Svg圈

＆＃13;

＆＃13;

#cut-circ circle {
  stroke-dasharray: 110;
  stroke-dashoffset: 0;
}
#cut-circ text {
  font-size: 10px;
  transform: translate(-13px, 2.5px);
}

＆＃13;

<svg id="cut-circ" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="23" stroke="red" fill="gray" />
  <text x="50" y="50">Foobar</text>
</svg>

＆＃13;

＆＃13;

＆＃13;

带文字的Css圈

＆＃13;

＆＃13;

.circ {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: inline-block;
  background-color: gray;
  border-top: 3px solid transparent;
  border-left: 3px solid red;
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  transform: rotate(45deg);
}
.circ span {
  display: inline-block;
  transform: rotate(-45deg) translate(-10px, 70px);
  font-size: 2em;
}

＆＃13;

<div class="circ">
  <span>Typo</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将4个边框中的3个设置为左边，将第4个边框设置为白色，然后将其旋转为-45度

＆＃13;

＆＃13;

#circle {
  background-color: grey;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid red;
  border-right: 1px solid white;
  transform: rotate(-45deg);
}

＆＃13;

<div id="circle"></div>

＆＃13;

＆＃13;

＆＃13;