html - 圆形/甜甜圈形状，切块

Question

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

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>

Answer 2

SVG

这是一个 svg 解决方案。
在圆形元素上使用剪辑路径（以排除图像的一角）
然后使用弧形路径元素制作披萨切片。

<svg width="100px" height="100px" viewbox="0 0 110 110">
  <defs>
    <clipPath id="myClip">
      <path clip-rule="evenodd" 
            d="M0 0 100 0  100 100 0 100Z 
               M67 67 100 67 100 100 67 100Z"/>
    </clipPath>
  </defs>
  <circle fill="none" stroke="LightBlue" stroke-width="25" cx="50" cy="50" r="35"  clip-path="url(#myClip)"/>
  <path fill="LightBlue" d="M70 70 70 100 A 25 25 0 0 0 100 70Z"/>
</svg>

Answer 3

基本上，最多只有 3 个 div 和一点 CSS，而且可能有点烦躁，它可能只需要一个 div 和一些 CSS。

蓝色甜甜圈只是一个带有粗蓝色边框的 div，并且设置了border-radius CSS 属性以使圆角形成一个圆形。

披萨片实际上只是一个简单的方形 div，带有蓝色背景和厚实的白色边框。

这两个元素将位于第三个 div 中，该 div 也使用边界半径使其成为圆形，但要么将边框颜色设置为透明，要么实际上根本没有边框，但无论哪种方式都是圆形的。这个外部的第三个 div 也将溢出属性设置为隐藏，从而给出披萨切片的圆形部分，因为该正方形将被外圆剪裁

披萨切片可以是甜甜圈的子元素，并且它的位置属性设置为相对，或者它也可能是外部剪切 div 的子元素，作为绝对位置，在后一种情况下，外部剪切 div 将具有位置属性设置为相对。

现在这将是您使用三个 div 的方式，但正如我之前提到的，如果使用 CSS 伪 ::before 和 ::after 类来伪造，它可能会有点烦躁地归结为一个 div其中两个 div ，可能是甜甜圈和比萨饼片，它们会留下但剪裁 div 作为页面中唯一真正的元素。

那将是最巧妙的，因为最终您会标记类似...

  <div class="logo"/>

...仅此而已

好吧，见鬼，把它称为五月的圣诞节

<style  type="text/css">
.logo       ,.logo::before  {border-radius  :50%;display:inline-block;padding:0;}
.logo::before   ,.logo::after   {position   :absolute;content:"";}
.logo       {   text-align:center;position:relative;border:none;
        width:11em;height:11em;overflow:hidden;}
.logo::before   {   left:.75em;top:.75em;width:3.5em;height:3.5em;
        margin:0;border:3em solid #00A6E1;}
.logo::after    {   border:.4em solid #fff;top:6.8em;
        left:6.8em;width:5em;height:5em;
        background-color:#0ae;display:block;}
</style>

.logo,
    .logo::before {
      border-radius: 50%;
      display: inline-block;
      padding: 0;
    }
    .logo::before,
    .logo::after {
      position: absolute;
      content: "";
    }
    .logo {
      text-align: center;
      position: relative;
      border: none;
      width: 11em;
      height: 11em;
      overflow: hidden;
    }
    .logo::before {
      left: .75em;
      top: .75em;
      width: 3.5em;
      height: 3.5em;
      margin: 0;
      border: 3em solid #00A6E1;
    }
    .logo::after {
      border: .4em solid #fff;
      top: 6.8em;
      left: 6.8em;
      width: 5em;
      height: 5em;
      background-color: #0ae;
      display: block;
    }

<div class="logo" />

这使你的标志成为你的后盾，当然只使用一个 div，普通的旧 CSS，没有图像或其他拍手陷阱。我实际上是一名程序员，但对我来说 CSS 只是另一种编程语言，每个人都想拿出画布 SVG 之类的东西，我认为值得展示一下 9 行文本如何将它们发送到木棚. :)

似乎在 Chrome/webkit 和 Mozilla 上都可以正常工作，当我启动到 Linux 桌面并且近十年没有 M$ 机器时，我无法真正说出 Microsoft 爆炸器将如何处理它。

注意我的习惯已经在与伪元素相关的新规范中采用了一些细节，因为传统上的语法是 .logo:before 和 .logo:after，但新规则说我应该使用双“::”代替旧的“：”，所以如果 M$ 爆炸器抱怨，人们可能会尝试将“：：”换成 IE 可能更喜欢的旧的“：”。较新的浏览器真的不在乎。