Làm thế nào để tạo ra một vòng tròn đáp ứng với các đường ngang trong suốt bên trong nó trong CSS?

Tôi không biết nếu điều này thậm chí có thể chỉ với css. Tôi muốn tạo một đường tròn với đường ngang trong suốt và bạn có thể thay đổi kích thước và vị trí của từng dòng này. Một cái gì đó giống như hình ảnh png này:Làm thế nào để tạo ra một vòng tròn đáp ứng với các đường ngang trong suốt bên trong nó trong CSS?

Tôi đã làm điều này cho đến nay, nhưng nó không phải là đáp ứng nó có dòng không minh bạch bên trong, nhưng bạn có thể di chuyển tất cả các dòng tự do.

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

Nguồn

2017-12-29 matthew4773

Đây là nó:

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>

Nguồn

2017-12-30 22:08:15 matthew4773

Bạn có thể sử dụng svg để tạo ra các hình dạng đáp ứng như dưới đây.

Trước tiên, bạn phải tạo svg hình dạng của mình bên trong svg Thẻ <symbol> để bạn có thể sử dụng sau này.

Sau đó tạo div có lớp enjoy-css và sau đó sử dụng trước đó được tạo svg sử dụng <use>. Đừng quên để cung cấp cho width="100%" đến <svg> cho mục đích đáp ứng

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>

Nguồn

2017-12-29 16:48:20 Bhuwan

Làm thế nào để tạo ra một vòng tròn đáp ứng với các đường ngang trong suốt bên trong nó trong CSS?

Trả lời

Các vấn đề liên quan