1/4圈

Question

如何用css绘制1/2或1/4 ＆＃34;相等＆＃34; 线宽圆圈？
（不是svg）

整条线宽度不等于如何修复它 https://jsfiddle.net/ryxq1e91/

＆＃13;

.circle {
    position: relative;
    display: inline-block;

    width: 40px;
    height: 40px;

    background-color: red;
}
.circle >div {
  top: 11px;
  left: 14px;
}
.circle >div {
  position: relative;

  width: 12px;
  height: 12px;
  border-bottom-right: 1px solid rgba(40,40,40,1);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-bottom-left: 1px solid rgba(40,40,40,1);
  border-radius: 8px;      
}

＆＃13;

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

＆＃13;

Answer 1

作为另一种选择，如果你想保留完整的div，只需制作你不想要的边框transparent。唯一需要注意的是它会旋转45度，所以只需用transform: rotate(45deg)转换它。

请注意，我不确定对此的支持是什么。

1/4圈

.circle {
    position: relative;
    display: inline-block;

    width: 120px;
    height: 120px;

    background-color: red;
}
.circle >div {
  top: 10px;
  left: 10px;
}
.circle >div {
  position: relative;

  width: 100px;
  height: 100px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid rgba(40,40,40,1);
  border-left: 1px solid transparent;
  border-top: 1px solid transparent;
  border-radius: 50px;
  transform: rotate(45deg);
}

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

1/2圈

.circle {
    position: relative;
    display: inline-block;

    width: 120px;
    height: 120px;

    background-color: red;
}
.circle >div {
  top: 10px;
  left: 10px;
}
.circle >div {
  position: relative;

  width: 100px;
  height: 100px;
  border-right: 1px solid rgba(40,40,40,1);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-left: 1px solid transparent;
  border-top: 1px solid transparent;
  border-radius: 50px;
  transform: rotate(45deg);
}

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

Answer 2

这有帮助??

＆＃13;

.circle {
	 border-radius: 90px 90px 0 0;
    -moz-border-radius: 90px 90px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
	height:45px;
    width:90px;
	margin-top:0px;
	border:2px solid black;
	border-bottom:none;
}
	
.quarter-circle {
    height:45px;
    width: 45px;
    -moz-border-radius: 150px 0 0 0;
    border-radius: 150px 0 0 0;
	border:2px solid black;
	border-bottom:none;
	border-right:none;
	
}

＆＃13;

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

＆＃13;

我认为把它变成一个加载图标会很有趣。

＆＃13;

	
.quarter-circle {
    height:45px;
    width: 45px;
	
	-moz-border-radius: 150px 0 0 0;
    border-radius: 150px 0 0 0;
	border:2px solid rgba(0,0,200,.5);

	border-bottom:none;
	border-right:none;
	
	
}



@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

＆＃13;

<div class="rotating" style="width:90px;height:90px;"><div class="quarter-circle"></div></div>

＆＃13;

Answer 3

您可以使用border-top-left-radius和border-top-right-radius属性根据框的高度（以及添加的边框）对框内的角进行圆角处理。

然后在框的顶部/右侧/左侧添加边框以达到效果。

1/2圈

＆＃13;

.half-circle {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

＆＃13;

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

＆＃13;

1/4圈

＆＃13;

.half-circle {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border-top-left-radius: 100px;
    border: 10px solid gray;
    border-right: 0;
    border-bottom: 0;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

＆＃13;

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

＆＃13;

Answer 4

你走了：

https://jsfiddle.net/3ozvfgnr/

一个带有边框和边框半径的完整圆圈，其中的元素会覆盖您不想要的部分以及具有相同背景颜色的部分。

<div class="circle">
   <div class="overlay1"></div>
  <div class="circlebasis"></div>
</div>
<div class="circle">
   <div class="overlay2"></div>
   <div class="overlay3"></div>
  <div class="circlebasis"></div>
</div>

.circle { 位置：相对; 宽度：80px; 身高：80px; 背景颜色：红色; 边距：5px的; } .circlebasis { box-sizing：border-box; 上：18px; 左：18px; 位置：相对; 宽度：40px; 身高：40px; 边界：2px solid rgba（40,40,40,1）; border-radius：22px;

}
.overlay1 {
  box-sizing: border-box;
  position:absolute;
  width: 80px;
  height: 40px;
  border: none;
  background-color: red;
  z-index:1;
}
.overlay2 {
  box-sizing: border-box;
  position:absolute;
  width: 80px;
  height: 40px;
  border: none;
  background-color: red;
  z-index:1;
}
.overlay3 {
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 80px;
    border: none;
    background-color: red;
    z-index: 1;
}

用css绘制1/2或1/4等宽线圆线

4 个答案:

1/4圈

1/2圈