html - 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的圆只是几行代码：

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

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

或CSS

.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);
}

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

如果我的文字有内部间距怎么办？


带有文本的svg圈

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

<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>

CSS圆与文本

.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;
}

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