如何製作帶有4個斜邊的形狀

我正在嘗試製作帶有四個負彎曲邊角的形狀，並且我嘗試了徑向漸變。然而，只有一個角落正在被應用，我不明白爲什麼。 https://jsfiddle.net/xiej/1Lqysaho/1/如何製作帶有4個斜邊的形狀

#shape2 { 
    width: 120px; 
    height: 120px; 
    position: absolute; 
    top: 400px; 
    right: 400px; 
    background-image: 
    radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px); 
}

來源

2016-09-14 Jacky Xie

每個徑向漸變的最後一種顏色停止掩蓋的廣場休息，想到他們分層超過對方。我不確定我的修復方法是否是獲得所需形狀的最佳方法，但我認爲這至少可以改善形狀！我縮短了停止點以結束徑向漸變，然後它將覆蓋其他三個角落中的任何一個。

https://jsfiddle.net/1Lqysaho/2/

background: #F00; 
background-image: 
    radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px), 
    radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px), 
    radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px), 
    radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px);

來源

2016-09-14 22:36:12

div.round { 
background: 
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
} 
div, div.round { 
background-position: bottom left, bottom right, top right, top left; c 
-moz-background-size: 50% 50%; 
-webkit-background-size: 50% 50%; 
background-repeat: no-repeat; 
} 
div { 
width: 130px; 
height:100px; 
margin:15px auto; 
padding:13px 15px; 
}

<div class="round"></div>

來源

2016-09-15 06:27:07

如何製作帶有4個斜邊的形狀

回答

相關問題