如何在 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

这是我的解决方案

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

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

这是使用伪元素的不同想法，您只需要调整主元素的宽度/高度即可控制大小：

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

Answer 4

您可以通过 CSS 制作形状，但问题在于弯曲边框：

 .polygon { border-top: 25px solid transparent; border-bottom: 70px solid blue; border-left: 0px solid transparent; border-right: 73px solid transparent; height: 0; border-top-left-radius:10px; border-top-right-radius:10px; width:100px; transform: rotate(90deg); }

 <div class="polygon"></div>

Answer 5

我更喜欢将此svg包装到一个块 < div > 元素中，因为您在此svg中使用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 属性，以便您可以通过以下方式更改包装器的大小和路径颜色：

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