4 điểm tròn sao hình dạng

Question

tôi đang cố gắng để có được ngôi sao này là điểm ảnh hoàn hảo càng tốt trong CSS, đây là những gì tôi đã cố gắng cho đến nay, nhưng nó là một ngôi sao góc 5, và tôi muốn chỉ có 4 nó điểm cũng làm thế nào tôi có thể làm cho các góc tròn hơn?

#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

Có lẽ bạn có thể sử dụng một gradient trên char Black Four Pointed Star Unicode:

✦

Nó có một số vấn đề tương thích (chủ yếu là do text-fill-color) nhưng tùy thuộc vào yêu cầu của bạn, nó có thể hoàn thành công việc.

.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

tôi sẽ đề nghị một SVG. Nếu bạn không muốn một yêu cầu http cho file svg, bạn có thể bao gồm mã svg trong thuộc tính 'nội dung':

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

Bạn có thể nhận được bốn điểm sao sử dụng hai hình chữ nhật xoay và nghiêng.

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

Rõ ràng, đối với loại hình dạng, và SVG nội tuyến sẽ là đơn giản nhất và các giải pháp crossbrowser nhất (và với một đáp ứng điểm ảnh đầu ra hoàn hảo).
Dưới đây là một mã inline svg đơn giản để làm cho một ngôi sao bốn điểm điền với một gradient:

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>

Bốn điểm được thực hiện với các yếu tố đường dẫn và sử dụng quadratic bezier curves. Ngôi sao được lấp đầy với một SVG linear gradient.