如何使用 CSS 和 HTML 创建曲面矩形（如图所示）？

Question

我需要将 CSS 代码应用于按钮、div、段落等。使响应式弯曲边根据内容自动收缩和扩展并且不会变得模糊。

我更喜欢一种样式，以最少的更改（如颜色和填充）应用于尽可能多的元素。

不推荐使用背景图像属性或 SVG。

类似结果的元素

Answer 1

尝试这样的事情。

这是您要实现的目标的紧密实现

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;
}

如何使用 CSS 和 HTML 创建曲面矩形（如图所示）？

问题描述

1 个解决方案

解决方案1
0 2017-10-17 11:54:12

如何使用 CSS 和 HTML 创建曲面矩形（如图所示）？

问题描述

1 个解决方案

解决方案1 0 2017-10-17 11:54:12

解决方案1
0 2017-10-17 11:54:12