在CSS中创建甜甜圈形状

Question

我知道如何创建一个带有边框半径等的css圆,但是我有兴趣创建一个css只有圆环形状大致像这里一样 - >

这将是一个div但弯曲回到自身,

有任何想法吗？？

Answer 1

<div class="doughnut"></div>


.doughnut { 
    border: 50px solid #f00;
    border-radius: 100px;
    height:100px;
    width:100px;
}

Answer 2

演示

div{width:200px; height:200px; border:1px solid black; position:relative; border-radius:200px;}
div:before{content:''; width:50px; height:50px; display:block; position:absolute; top:75px; left:75px; border:1px solid black; border-radius:200px;}

Answer 3

这个形状也可以用 css3 绘制radial-gradient()：

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
}

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
}

body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
  border-radius: 100%;
  height: 300px;
  width: 300px;
  margin: 25px;
}