Question

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

我更喜欢使用样式尽可能多地应用最少的元素（如颜色和填充）。

不首选使用backgroud-image属性或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;
}

Answer 2

以下是圆角的示例：

// Only Change 3 values
let data = [
  Math.round(Math.random() * 100),
  59,
  80,
  Math.random() * 100,
  56,
  Math.random() * 100,
  40
];
let clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = data;
this.barChartData = clone;
/**
 * (My guess), for Angular to recognize the change in the dataset
 * it has to change the dataset variable directly,
 * so one way around it, is to clone the data, change it and then
 * assign it;
 */

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

2 个答案: