如何使用CSS和HTML創建曲面矩形（如圖中所示）？

-9

我需要將CSS代碼應用於按鈕，div，段落等，使響應曲面根據內容自動收縮和擴展，並且不會模糊。如何使用CSS和HTML創建曲面矩形（如圖中所示）？

我希望一個樣式適用於儘可能多的元素儘可能少的變化（如顏色和填充）。

使用backgroud-image屬性或SVG不是首選。

結果片狀元件

2017-10-17 Abdullah Abolwafa

預計您至少會嘗試自己編寫此代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

-1

如果你只想圓角。

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    #rcorners1 { 
     border-radius: 25px; 
     background: #73AD21; 
     padding: 20px; 
     width: 200px; 
     height: 150px;  
    }  
    </style> 
    </head> 
    <body> 
    <p>The border-radius property allows you to add rounded corners to elements.</p> 
    <p>Rounded corners for an element with a specified background color:</p> 
    <p id="rcorners1">Rounded corners!</p>  
    </body> 
</html>

來源

2017-10-17 09:14:31

感謝您的貢獻，但我已經包含了我想要用元素實現的圖像，並且我認爲'border-radius'屬性不符合目標。 –

嘗試類似這樣的東西。

這是你正在努力實現

https://jsfiddle.net/rahulSlash/qva79at5/

的HTML代碼如下

<html> 

    <body> 

    <div class="blue"> 
     <div class="white"> 
     </div> 
    </div> 

    </body> 

</html>

和CSS什麼密切實現雲：

.blue { 
    height: 175px; 
    width: 300px; 
    background-color: #005999; 
    border-radius: 40%/20%; 
    position: relative; 
    margin-left: 100px; 
} 

.white { 
    position: absolute; 
    height: 75px; 
    width: 100px; 
    background-color: white; 
    left: -50px; 
    top: 50px; 
    border-radius: 40%/25%; 
    box-shadow: -5px 0px 10px -2px #aaaaaa; 
}

來源

2017-10-17 11:54:12

請讓我知道它是否對你有幫助。 –

感謝您的努力，但此解決方案只能曲線頂部和底部，而不會自動適應所有不同大小的形狀。 –

下面是一個圓角示例：

<html> 
<head> 
<style> 
p { 
    border-radius:15px; 
    border:5px dotted blue; 
} 
</style> 
<body bgcolor="tomato"> 
<h1> Hi! </h1> 
<hr> 
<p> Hey! This has a border! </p> 
</body> 
</html>

來源

2018-03-09 14:27:03 Goos

如何使用CSS和HTML創建曲面矩形（如圖中所示）？

回答

相關問題