Question

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

Answer 1

像这样的东西会为你做（可能需要一些修补）：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在允许透明背景方面，您可以使用以下内容来说明这一点：

＆＃13;

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%);
}

＆＃13;

HOVER ME
<div></div>

＆＃13;

Answer 2

SVG

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

＆＃13;

<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>

＆＃13;

Answer 3

基本上，这最多是3个div和一个小CSS，并且可能有点烦躁，它可能只有一个div和一些CSS。

蓝色甜甜圈只是一个带有粗蓝色边框的div，边界半径CSS属性设置为圆角形成一个圆圈。

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

这两个元素将位于第三个div中，该div也使用border-radius使其成为圆形，但要么将边框颜色设置为透明，要么实际上根本没有边框，但任何一种都是圆形的。这个外部的第三个div也可以将overflow属性设置为隐藏，从而给出披萨切片的圆角部分，因为该正方形将被外圈修剪

披萨切片可能是甜甜圈的一个孩子，并且它的位置属性设置为相对，或者它也可能是外部裁剪div的子位置绝对位置，在后一种情况下，外部剪切div将position属性设置为relative。

现在这将是你如何用三个div来做的，但正如我之前提到的，它可能会有一些烦恼，但如果一个人使用CSS伪::之前和之后的一个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>

＆＃13;

.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;
    }

＆＃13;

<div class="logo" />

＆＃13;

这使得徽标成为您的标志，当然使用的是单个div，普通旧CSS，没有图像或其他拍手陷阱。我实际上是一个交易程序员，但对我来说，CSS只是另一种编程语言，并且每个人都想要提取画布SVG等，我认为值得展示9行文本如何将em发送到木棚。：）

似乎在Chrome / webkit和Mozilla上工作正常，在我启动到Linux桌面并且近十年内没有M $机器时，真的可以说明微软的爆炸者将如何使用它

注意我的习惯已经在与伪元素相关的新规范中采用了一些细节，传统上语法是.logo：before和.logo：after，但是新规则说我＆＃ 39;我应该使用double＆＃34; ::＆＃34;而不是旧的＆＃34;：＆＃34;，所以如果M $爆炸呜呜声，人们可能会尝试交易＆＃34; ::＆＃34;对于年龄较大的＆＃34;：＆＃34; IE可能会更好。较新的浏览器真的不在乎。

圆形/甜甜圈形状与片断

3 个答案:

SVG