html - 圆形/ donut 形状，切掉一 block

Question

如何使用纯 CSS 或 Canvas 制作如下图所示的图像？我需要它有一个透明的背景；你能帮我吗？

Answer 1

像这样的东西会为你做(可能经过一些修补):

html,body{background:black;}

.nut{
  height:200px;
  width:200px;
  border-radius:50%;
  position:relative;
  background-color:lightblue;
  }

.nut:before{
  position:absolute;
  content:"";
  height:40%;
  width:40%;
  background-color:black;
  left:30%;
  top:30%;
  border-radius:50%;
  }
.nut:after{
 position:absolute;
  content:"";
  height:40%;
  width:40%;
  background-color:lightblue;
  right:-5%;
  bottom:-5%;
  border-radius: 0 0 100% 0;
  border-left:5px solid black;
  border-top:5px solid black;
}

<div class="nut"></div>

---

在允许透明背景方面，你可以用类似的东西来说明这一点:

div {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  border: 50px solid blue;
  position: relative;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  margin: 20px auto;
}
div:after {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 50px solid transparent;
  border-bottom-color: blue;
  transition: all 0.6s;
}
div:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  height: 100%;
  width: 100%;
  border: 10px solid blue;
  border-radius: 50%;
}
div:hover:after {
  top: -30px;
  left: -50px;
  border-bottom-color: tomato;
}
/*DEMO ONLY*/

html {
  text-align: center;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}

HOVER ME
<div></div>