时间戳

首页 > 解决方案 > 如何在 CSS 中创建这种形状（带圆角的四边形）？

html - 如何在 CSS 中创建这种形状（带圆角的四边形）？

问题描述

我在 React Js 中构建一个小部件，在设计中，这个图像在背景中。

在 css 中创建 thi 形状

我的问题是背景颜色是动态的，宽度和高度可能会根据设备而变化。我尝试使用内联 SVG（我可以通过这种方式控制填充颜色，但不能控制大小）以及img标签内的 SVG（我可以通过这种方式控制大小，但不能控制颜色），但我无法同时控制颜色和大小。

编辑 - 内联 SVG 代码片段 -

<svg width="360" height="349" viewBox="0 0 300 349" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.9543 8.95431 0 20 0H280C291.046 0 300 8.95431 300 20V187.023C300 194.606 295.711 201.537 288.925 204.921L0 349V20Z" fill="#5795fa"></path></svg>

我尝试改变那个宽度，但是 svg 是为那个特定的宽度创建的，所以它没有改变。

如果有人可以帮助我使用 CSS 或任何其他我可以控制颜色和大小的方式来创建这个形状，那就太好了。

任何帮助表示赞赏。

标签： htmlcssreactjssvgcss-shapes

解决方案

这是我的解决方案

您可以更改外部宽度以检查（响应式）。

.outer {
  width: 300px;
}

.upper-box {
  width: 100%;
  height: 150px;
  background: blue;
  border-radius: 15px 15px 15px 0;
}

.lower-box {
  width: calc(100% - 12px);
  height: 110px;
  background: linear-gradient(to bottom right, blue 50%, transparent 50%);
}
<div class="outer">
  <div class="upper-box"></div>
  <div class="lower-box"></div>
</div>

推荐阅读