शुद्ध सीएसएस ढाल चक्र सीमा

Question

मैं फिलहाल इस यूआई आवश्यकता

है, मैं एक div के एक कार्य समाधान और एक छद्म (एक निश्चित ऊंचाई और चौड़ाई और बाहरी ढाल सीमा के लिए एक पृष्ठभूमि छवि के साथ) है तत्व, आंतरिक सीमा की पृष्ठभूमि छवि के साथ absolute पर तैनात।

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

हालांकि, एक अधिक सुरुचिपूर्ण समाधान (शुद्ध सीएसएस या svg ढाल?) पृष्ठभूमि छवियों के उपयोग जहां ढाल नहीं पिक्सेलेशन साथ पैमाने पर कर सकते हैं बिना रहा हूँ।

मैं शोध किया है और निकटतम मैं भर में आ गए हैं https://codepen.io/nordstromdesign/pen/QNrBRM और Possible to use border-radius together with a border-image which has a gradient? है लेकिन मैं एक समाधान जहां केंद्र आदेश पृष्ठ की पृष्ठभूमि के माध्यम से दिखाने के लिए

अद्यतन में पारदर्शी है की जरूरत है: आदर्श रूप में, अपेक्षाकृत के साथ एक समाधान के लिए देख रहा हूँ सभी आधुनिक ब्राउज़रों में अच्छा समर्थन।

Answer 1

SVG एक सर्कल आकार बनाने और इसके चारों ओर ढाल रूपरेखा रूपरेखा/सीमा बनाने के लिए अनुशंसित तरीका है।

SVG में circle तत्व है जिसका उपयोग सर्कल आकार को आकर्षित करने के लिए किया जा सकता है। इस आकार को एक ठोस रंग, ढाल या पैटर्न के साथ भर दिया और रेखांकित किया जा सकता है।

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

आप जो भी खोज रहे हैं उसे प्राप्त करने के लिए आप mask का उपयोग कर सकते हैं। आपको एक पारदर्शी सर्कल के साथ एक एसवीजी फ़ाइल की आवश्यकता होगी। यहाँ मैं इंटरनेट से एक छवि का इस्तेमाल किया, लेकिन आप अपने को अपनी आवश्यकताओं को समायोजित करने के स्वयं के कर सकते हैं:

mask: url(circle.svg); 

• CodePen (पारदर्शिता दिखाने के लिए लाल करने के लिए पृष्ठभूमि सेट)
• mask reference
• making your own masks