如何使用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创建曲面矩形（如图中所示）？

回答

相关问题