logo标签列表

如何在CSS中制作一个带有透明水平线的响应式圆形？

css
5

我不知道仅使用CSS是否可以实现这一点。我想要制作一个带有透明水平线的圆形，您可以更改每条线的大小和位置。类似于这张PNG图片：

enter image description here

我到目前为止已经做了这个，但它不是响应式的，内部没有透明线条，但你可以自由地移动所有线条。 

.enjoy-css {
  box-sizing: content-box;
  width: 300px;
  height: 300px;
  position: absolute;
  border: none;
  border-radius: 150px;
  background: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white)black;
  background-repeat: no-repeat;
  background-position: 90% 90%, 55% 75%, 90% 10%, 95% 30%, 90%;
  background-origin: padding-box;
  background-size: 124px 20px, 153px 20px, 124px 20px, 153px 20px, 80px 20px;
}
<div class="enjoy-css">
  <span></span>
</div>

2个回答
1
你可以使用svg来创建下面这样的响应式形状。
首先，你需要在svg的<symbol>标签内创建你的形状的svg，以便稍后使用它。
然后，创建一个具有类名为enjoy-css的
，然后使用之前创建的svg，使用<use>。不要忘记为了响应式目的给<svg>设置width="100%"。 

svg.defs-only {
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

body {
  background: gold;
}

.enjoy-css {
  max-width: 400px;
}
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="400px">
<symbol id="potofgold" >
<path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
 d="M387.395,270.000 L154.000,270.000 L154.000,298.000 L374.370,298.000 C368.372,308.648 361.409,318.675 353.632,328.000 L103.000,328.000 L103.000,356.000 L325.121,356.000 C290.863,383.519 247.363,400.000 200.000,400.000 C89.543,400.000 0.000,310.457 0.000,200.000 C0.000,177.987 3.567,156.809 10.136,137.000 L263.000,137.000 L263.000,109.000 L21.855,109.000 C28.645,95.734 36.895,83.344 46.356,72.000 L238.000,72.000 L238.000,44.000 L74.879,44.000 C109.140,16.485 152.638,0.000 200.000,0.000 C310.457,0.000 400.000,89.543 400.000,200.000 C400.000,224.628 395.538,248.212 387.395,270.000 ZM326.000,187.000 L63.000,187.000 L63.000,215.000 L326.000,215.000 L326.000,187.000 Z"/>
</symbol>
</svg>

<div class="enjoy-css"><svg viewBox="0 0 400 400" width="100%"><use xlink:href="#potofgold"/></svg></div>

0

就是这样：

body {
  background: #aaa;
  background: url(http://www.lorempixel.com/600/600/abstract); /* background to show transparency */
}
.circle {
  max-width: 20em; /* Set the max diameter */
  margin: 0 auto;
}
.circle span {
  position: relative;
  display: block;
  padding-bottom: 100%;
}
.circle span::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background-image: linear-gradient(
      black 10%,
      transparent 10%,
      transparent 18%,
      black 18%,
      black 28%,
      transparent 28%,
      transparent 36%,
      black 36%,
      black 45%,
      transparent 45%,
      transparent 55%,
      black 55%,
      black 64%,
      transparent 64%,
      transparent 72%,
      black 72%,
      black 82%,
      transparent 82%,
      transparent 90%,
      black 90%
    ),
    linear-gradient(to right, transparent 60%, black 60%),
    linear-gradient(to right, transparent 70%, black 70%),
    linear-gradient(
      to right,
      black 15%,
      transparent 15%,
      transparent 85%,
      black 85%
    ),
    linear-gradient(to left, transparent 60%, black 60%),
    linear-gradient(to left, transparent 70%, black 70%);
  background-size: 100%, 100% 20%, 100% 40%, 100% 20%, 100% 20%, 100% 20%;
  background-position: top, top, top, 40%, 0 70%, 0 90%;
  background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<body>
<div class="circle">
  <span></span>
</div>
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接