4 गोल अंक स्टार आकार

Question

मैं सीएसएस में संभव के रूप में सही पिक्सेल के रूप में इस स्टार पाने के लिए कोशिश कर रहा हूँ, यहाँ क्या मैं अब तक की कोशिश की है, लेकिन यह एक 5 कोणीय स्टार है, और मैं यह केवल 4 करना चाहते हैं अंक भी मैं कोनों को अधिक गोलाकार कैसे बना सकता हूं?

#star-five { 
 
    margin: 50px 0; 
 
    position: relative; 
 
    display: block; 
 
    color: red; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -moz-transform: rotate(35deg); 
 
    -webkit-transform: rotate(35deg); 
 
    -ms-transform:  rotate(35deg); 
 
    -o-transform:  rotate(35deg); 
 
} 
 
#star-five:before { 
 
    border-bottom: 80px solid red; 
 
    border-left: 30px solid transparent; 
 
    border-right: 30px solid transparent; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    top: -45px; 
 
    left: -65px; 
 
    display: block; 
 
    content: ''; 
 
    -webkit-transform: rotate(-35deg); 
 
    -moz-transform: rotate(-35deg); 
 
    -ms-transform:  rotate(-35deg); 
 
    -o-transform:  rotate(-35deg); 
 

 
} 
 
#star-five:after { 
 
    position: absolute; 
 
    display: block; 
 
    color: red; 
 
    top: 3px; 
 
    left: -105px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 70px solid red; 
 
    border-left: 100px solid transparent; 
 
    -webkit-transform: rotate(-70deg); 
 
    -moz-transform: rotate(-70deg); 
 
    -ms-transform:  rotate(-70deg); 
 
    -o-transform:  rotate(-70deg); 
 
    content: ''; 
 
}

<div id="star-five"></div>

Answer 1

शायद तुम Black Four Pointed Star यूनिकोड चार पर एक ढाल इस्तेमाल कर सकते हैं:

✦

यह कुछ संगतता समस्याओं (ज्यादातर text-fill-color के कारण) है, लेकिन आपकी आवश्यकताओं के आधार पर यह काम पूरा हो सकता है।

.four-point-star::after, 
 
.four-point-star::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: "\2726"; 
 
    font-size: 12rem; 
 
} 
 

 
.four-point-star::after { /* The foreground star */ 
 
    background: linear-gradient(135deg, rgba(255,191,183,1) 20%, rgba(243,44,117,1) 70%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
} 
 

 
.four-point-star::before { /* The star shadow */ 
 
    color: transparent; 
 
    text-shadow: 2px 3px 10px rgba(242, 96, 85, 1); 
 
} 
 

 
/* Demo styling */ 
 
body { 
 
    background: #fbd629; 
 
    padding: 0 2rem; 
 
} 
 

 
.four-point-star { 
 
    position: relative; 
 
}

<span class="four-point-star"></span>

Answer 2

मैं एक एसवीजी सुझाव है। आप एसवीजी फ़ाइल के लिए एक और http अनुरोध नहीं करना चाहता था, तो आप 'सामग्री' विशेषता में svg कोड शामिल हो सकते हैं:

content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");

.star-4-point { 
 
    background: url("data:image/svg+xml; utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'><path d='M25,50c0,0,1.325-8.413,8.957-16.043C41.587,26.325,50,25,50,25l0,0c0,0-8.413-1.325-16.043-8.957C26.325,8.413,25,0,25,0 l0,0c0,0-1.325,8.413-8.957,16.043C8.413,23.675,0,25,0,25l0,0c0,0,8.413,1.325,16.043,8.957C23.675,41.588,25,50,25,50'/></svg>"); 
 
    height: 50px; 
 
    width: 50px; 
 
}

<div class="star-4-point"></div>

Answer 3

आप चार बिंदु प्राप्त कर सकते हैं दो घुमावदार और तिरछे आयत का उपयोग कर स्टार।

body { 
 
    /* just styles for demo */ 
 
    background-color: #fdd700; 
 
} 
 

 
.four-point-star { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    margin-top: 100px; 
 
    margin-left: 100px; 
 
} 
 

 
.four-point-star:before, 
 
.four-point-star:after { 
 
    content: ""; 
 
    position: absolute; 
 
    background-color: #fa5b88; 
 
    display: block; 
 
    left: 0; 
 
    width: 141.4213%; /* 100% * √2 */ 
 
    top: 0; 
 
    bottom: 0; 
 
    border-radius: 5%; 
 
    transform: rotate(66.66deg) skewX(45deg); 
 
} 
 

 
/* the same but +90deg to rotate */ 
 
.four-point-star:after { 
 
    transform: rotate(156.66deg) skew(45deg); 
 
}

<div class="four-point-star"></div>

Answer 4

जाहिर है, आकार के इस प्रकार, और इनलाइन एसवीजी के लिए सबसे आसान और सबसे crossbrowser समाधान (और एक संवेदनशील पिक्सेल सही उत्पादन के साथ) होगा।

svg{ 
 
    display:block; margin:0 auto; 
 
    width:30%; height:auto; 
 
} 
 
/* For the demo */ body{background: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');background-size:cover;}

<svg viewbox="0 0 10 10"> 
 
    <defs> 
 
    <linearGradient id="starGrad"> 
 
     <stop offset="0%" stop-color="rgb(153,218,255)" /> 
 
     <stop offset="100%" stop-color="rgb(0,128,128)"/>  
 
    </linearGradient> 
 
    </defs> 
 
    <path fill="url(#starGrad)" d="M5 1 Q5.8 4.2 9 5 Q5.8 5.8 5 9 Q4.2 5.8 1 5 Q4.2 4.2 5 1z" /> 
 
</svg>

चार अंक quadratic bezier curves का उपयोग कर पथ तत्व के साथ बना रहे हैं और कर रहे हैं:
यहाँ के लिए एक सरल इनलाइन svg कोड है एक चार बिंदु एक ढाल के साथ भरा सितारा बनाने। स्टार SVG linear gradient से भरा है।