4 yuvarlatılmış noktaları yıldız şekli CSS olabildiğince mükemmel piksel olarak bu yıldızı almak çalışıyorum

Question

, burada şimdiye kadar çalıştığı şey budur, ama bir 5 açılı bir yıldız ve bunu sadece 4 olsun istiyorum noktalar ayrıca köşeleri nasıl daha yuvarlak hale getirebilirim?

#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

Belki Black Four Pointed Star Unicode char bir gradyan kullanabilirsiniz:

✦

Bu (çoğunlukla text-fill-color kaynaklanan) bazı uyumluluk sorunları var ama İhtiyaçlarınıza bağlı olarak işi bitirebilir.

.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

Bir SVG öneririz. Dört nokta alabilirsiniz

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

: Eğer svg dosyası için başka http isteği istemeseydi, 'İçerik' özelliğinde svg kodunu içerebilir iki döndürülen ve çarpık dikdörtgenler kullanarak yıldız.

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

Açıkçası, bu şeklin tür ve içi SVG için en basit ve en çok crossbrowser çözeltisi (ve duyarlı bir piksel mükemmel çıkışı ile) olur.

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>

dört puan yolu elemanı ile yapılan ve quadratic bezier curves kullanıyor:
İşte için basit satır içi svg kodudur bir gradyan ile dolu bir dört noktalı yıldız yapacağım. Yıldız, SVG linear gradient ile doldurulur.