如何在 CSS 中创建此形状（带圆角的四边形）？

Question

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

我的问题是背景颜色是动态的，宽度和高度可能会根据设备而变化。我尝试使用内联 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 或任何其他我可以控制颜色和大小的方式来创建此形状，那就太好了。

感谢任何帮助。

Answer 1

我更愿意将此 svg 包装到块 <div> 元素中，因为您使用 [= svg 中的 31=]viewBox 属性将按比例增大或缩小。

看看这个代码快照：

<div class="wrap">
<svg viewBox="0 0 300 349" xmlns="http://www.w3.org/2000/svg">
    <path class="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"></path>
</svg> 
</div>

我删除了 svg 的 width 和 height 属性，并删除了 path 的 fill 属性并分配一个 class 属性，以便您可以更改包装器的大小和 path 颜色依据：

.wrap {
    width: 500px; /* the height will proportionaly grow or shrink complied with the viewBox */
}
.path {
    fill: red; /* specify the color as you wish */
}

下面是 css 形状，不完美但非常接近那个 svg:

.box {
  width: 300px;
  height: 200px;
  background-color: #5795fa;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  position: relative;
}
.box::after {
  content: " ";
  display: block;
  position: absolute;
  left: 0px;
  top: 100%;
  height: 0;
  border-top: 30px solid #5795fa;
  border-left: 150px solid #5795fa;
  border-bottom: 30px solid transparent;
  border-right: 150px solid transparent;
}

<div class="box"></div>

Answer 2

只需删除 width、height 和 fill 属性并使用 css:

svg {
    width: 360px;
    fill: #5795fa;
}

<svg viewBox="0 0 300 349" 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"></path></svg>

Answer 3

这是我的解决方案

You can change outer width as to check (Responsive).

.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>

Answer 4

这里有一个不同的想法，使用伪元素，你只需要调整主元素的width/height来控制大小：

.box {
  width:150px;
  height:200px;
  border-radius:10px 10px 10px 0;
  overflow:hidden;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:lightblue;
  transform:skewY(-25deg);
  transform-origin:left;
  border-bottom-right-radius:inherit;
}

<div class="box">

</div>

如果想从主元素控制颜色可以考虑渐变：

.box {
  width:150px;
  height:200px;
  display:inline-block;
  border-radius:10px 10px 10px 0;
  overflow:hidden;
  position:relative;
  background-size:0 0;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  transform:skewY(-25deg);
  transform-origin:left;
  border-bottom-right-radius:inherit;
}

<div class="box" style="background-image:linear-gradient(red,red)">

</div>

<div class="box" style="background-image:linear-gradient(green,green)">

</div>

或CSS个变量：

.box {
  width:150px;
  height:200px;
  display:inline-block;
  border-radius:10px 10px 10px 0;
  overflow:hidden;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c);
  transform:skewY(-25deg);
  transform-origin:left;
  border-bottom-right-radius:inherit;
}

<div class="box" style="--c:red">

</div>

<div class="box" style="--c:green">

</div>

如何在 CSS 中创建此形状（带圆角的四边形）？

How to create this shape (quadilateral with rounded corners) in CSS?

html

css

reactjs

svg

css-shapes