4圓角點星形

我想獲得完美儘可能在CSS這個明星的像素，這裏是我的嘗試，到目前爲止，但它是一個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>

來源

2017-07-24 Panic

SVG是去這裏的方式......其他任何東西都會** wayyy **變得複雜。 –

也許你可以在Black Four Pointed Star的Unicode字符使用漸變：

✦

它有一些兼容性問題（主要由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>

來源

2017-07-24 16:23:58

太棒了！另外我會爲IE做一些備用，並且會很完美。 –

我會建議一個SVG。如果你不想爲SVG文件另一個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>

來源

2017-07-24 16:12:15

你最好爲你的SVG添加代碼，因爲你可以給每個[tag：css-shapes]問題提供相同的答案，它根本沒有幫助。 –

1）不幸的是，除了Chrome瀏覽器（Firefox，IE，Edge）以外，其他位置都不顯示。 2）你可以像Jordi Nebot一樣向SVG添加漸變效果嗎？ –

現在在Chrome＆FF中工作，還沒有測試IE或Edge。 –

你可以得到四點星星使用兩個旋轉和傾斜的矩形。

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>

來源

2017-07-24 16:18:31

感謝您的努力！上面的其他人發佈了一個更簡單和像素完美的方式，雖然 – Panic

@Panic好的，沒問題。 –

顯然，對於這種形狀，內聯SVG將是最簡單和最跨瀏覽器的解決方案（和一個負責任的像素完美輸出）。
下面是一個簡單的內聯SVG代碼使四角星用漸變填充：

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 linear gradient。

來源

2017-08-02 08:41:45

4圓角點星形

回答

相關問題