曲線效果帶邊框半徑和箱形陰影

-2

對於所有的CSS形狀創作者：任何想法如何使這種曲線只有CSS？曲線效果帶邊框半徑和箱形陰影

2016-03-11 Sam De Decker

CSS不是爲了創造這樣的波狀圖案的工具。不要使用CSS。請嘗試使用SVG。如果你仍然想使用CSS，那麼你可能會在這些線程中找到一些幫助 - [one]（http://stackoverflow.com/questions/27785114/how-can-i-make-a-full-width-wave-in -css），[two]（http://stackoverflow.com/questions/27777470/wave-or-shape-with-border-on-css3）。 – Harry

我會建議讓你的波與油漆的例子。將其另存爲圖片，並將其作爲CSS中的背景。它更容易，並具有相同的效果，我認爲。

來源

2016-03-11 13:27:25 theoretisch

一個posibility（如果你想留在純CSS）將向下使用徑向漸變

你需要一個在左側，與向上的中心，而另一個在右側，與中心

.test { 
 
    border: solid 1px blue; 
 
    width: 600px; 
 
    height: 50px; 
 
    background-repeat: no-repeat; 
 
    background-image: radial-gradient(circle at 50% -563px, red 600px, transparent 600px), 
 
        radial-gradient(circle at 50% 603px, transparent 600px, red 600px); 
 
    background-size: 50% 40px; 
 
    background-position: left bottom, right bottom; 
 
}

<div class="test"></div>

來源

2016-03-11 17:36:10 vals

曲線效果帶邊框半徑和箱形陰影

回答

相關問題