CSS3彎曲的背景css或無響應網站的背景圖片？

我被要求用css/html從設計中創建一個頁面。CSS3彎曲的背景css或無響應網站的背景圖片？

主要背景是彎曲的，有2種顏色。

我不知道什麼是最好的/最快的方式去繞過這個設計是...背景圖像或用css3曲線的圖像。

這是設計bg圖片......繞過這種設計的最佳方式是什麼？

enter image description here

來源

2015-07-20 Satch3000

簡單的純CSS圓角背景與容器的演示內容：

http://codepen.io/serkai/pen/JdaYjX

例編譯此處的CSS：

.bg-border-radius { 
    margin: -400px auto 0; 
    width: 1000px; 
    height: 800px; 
    overflow: hidden; 
    border-radius: 0 0 70% 70%; 
    background-color: #0080C1; 
}

來源

2015-07-20 22:54:26

因爲它是一個堅實的顏色。我只是將該區域定義爲div並使用背景邊框半徑純CSS。

即

.strangeblueelement { 
    background: blue; 
    border-radius: 25px; // toggle til you get your effect 
    width: $width; 
    height: $height; 
}

另一個demo。

看看這篇文章 - 你可以去做一個很好的小圓圈，只是使用CSS。

https://css-tricks.com/almanac/properties/b/border-radius/

來源

2015-07-20 19:58:33

是的，使用CSS這裏。保存http請求並更易於維護。 –

在這一點上，確切地也得到了很好的支持。 –

我可以建議使用border-radius：...％而不是px：http://jsfiddle.net/u5U57/175/ – Pepe

CSS3彎曲的背景css或無響應網站的背景圖片？

回答

相關問題