CSS에서 투명한 수평선이있는 반응 형 원을 만드는 방법은 무엇입니까?

css에서만 가능할지 모르겠습니다. 투명 가로선이있는 원을 만들고 싶고이 두 줄의 크기와 위치를 변경할 수 있습니다. 이 PNG 사진처럼 뭔가 :CSS에서 투명한 수평선이있는 반응 형 원을 만드는 방법은 무엇입니까?

나는 지금까지 이런 짓을하지만, 내부하지 투명 선이 반응하지 않는,하지만 당신은 자유롭게 모든 행을 이동할 수 있습니다.

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

출처

2017-12-29 matthew4773

이것이다 :

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>

출처

2017-12-30 22:08:15 matthew4773

아래처럼 반응 도형을 만들 svg를 사용할 수 있습니다.

처음에는 svg 모양을 svg<symbol> 태그 안에 만들어야 나중에 사용할 수 있습니다.

그런 다음 enjoy-css 클래스를 가진 div를 만든 다음 이전에 만든 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>

출처

2017-12-29 16:48:20 Bhuwan

CSS에서 투명한 수평선이있는 반응 형 원을 만드는 방법은 무엇입니까?

답변

관련 문제