圆/圆环形状，带有一块裁剪

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。

蓝色甜甜圈只是一个带有蓝色粗边框和边框半径CSS属性的div，以使圆角形成一个圆。

披萨片实际上是一个普通的正方形div，具有蓝色背景和粗略的白色边框。

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

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

这就是你如何用三个div来做这件事，但正如我前面提到的，它可能会被归结为一个div，但是如果一个人使用CSS伪：：之前和：：之后的类来伪造两个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上都工作得很好，不能真正说出Microsoft exploder会如何接受它，因为我启动到Linux桌面，已经有近十年没有M$机器了。

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