CSS tinh khiết biên giới vòng tròn dốc

Question

Tôi có điều này yêu cầu UI

Tại thời điểm này, tôi có một giải pháp làm việc của một div (với chiều cao cố định và chiều rộng và hình nền cho biên giới dốc bên ngoài) và một pseudo phần tử, được định vị absolute với hình nền của đường viền bên trong.

.div { 
    position: relative; 
    width: 254px; 
    height: 254px; 
    border: 2px solid transparent; 
    border-radius: 50%; 
    background: url(../img/gradient_border_circle.png) no-repeat 50%; 
} 
div:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%,-50%); 
    left: 50%; 
    width: 98px; 
    height: 98px; 
    border-radius: 50%; 
    background: url(../img/gradient_border_circle_inner.png) no-repeat 50%; 
} 

Tuy nhiên, tôi đang tìm kiếm một giải pháp thanh lịch hơn (thuần túy hoặc svg gradient?) Mà không sử dụng hình nền có thể chia tỷ lệ mà không có pixelation.

Tôi đã nghiên cứu và gần nhất tôi đã đi qua là https://codepen.io/nordstromdesign/pen/QNrBRM và Possible to use border-radius together with a border-image which has a gradient? Nhưng tôi cần một giải pháp mà trung tâm là minh bạch để hiển thị thông qua nền của trang

Cập nhật: Một cách lý tưởng, đang tìm kiếm một giải pháp với tương đối hỗ trợ tốt trong tất cả các trình duyệt hiện đại.

Answer 1

SVG là cách được khuyến nghị để tạo hình tròn và vẽ đường viền/đường viền xung quanh.

SVG có thành phần circle có thể được sử dụng để vẽ hình tròn. Hình dạng này có thể được điền và được phác thảo bằng màu, độ dốc hoặc hoa văn rắn.

* {box-sizing: border-box;} 
 

 
body { 
 
    background: linear-gradient(#333, #999); 
 
    text-align: center; 
 
    min-height: 100vh; 
 
    padding-top: 10px; 
 
    margin: 0; 
 
} 
 
svg {vertical-align: top;}

<svg width="210" height="210"> 
 
    <defs> 
 
    <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0"> 
 
     <stop offset="0" stop-color="#f5d700" /> 
 
     <stop offset="1" stop-color="#0065da" /> 
 
    </linearGradient> 
 
    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient> 
 
    </defs> 
 
    <g fill="none"> 
 
    <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" /> 
 
    <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" /> 
 
    </g> 
 
</svg>

Answer 2

Bạn có thể sử dụng mask để đạt được những gì bạn đang tìm kiếm. Bạn sẽ cần một tập tin SVG với một vòng tròn trong suốt. Ở đây tôi sử dụng một hình ảnh từ Internet, nhưng bạn có thể làm của riêng bạn để phù hợp với nhu cầu của bạn:

mask: url(circle.svg); 

• CodePen (background là màu đỏ để thể hiện tính minh bạch)
• mask reference
• making your own masks