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

Posted 2023-03-05

【中文标题】如何在 CSS 中创建这种形状（带圆角的四边形）？

【英文标题】：How to create this shape (quadilateral with rounded corners) in CSS?

【发布时间】：2020-03-13 10:56:02

【问题描述】：

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

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

编辑 - 内联 SVG 代码 sn-p -

<svg   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 或任何其他我可以控制颜色和大小的方式来创建这个形状，那就太好了。

感谢任何帮助。

【问题讨论】：

“我尝试使用内联 SVG（我可以通过这种方式控制填充颜色，但不能控制大小）”您应该能够控制大小。您可以发送带有内联 svg 的代码 sn-ps 吗？

@Arseniy-II 我编辑了问题（添加了内联 svg 代码 sn-p）

我理解你的问题，如果我没有错，那么你想要类似于我的解决方案的东西。请查看我的解决方案并告诉我。谢谢

【参考方案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>

【讨论】：

如果您想要现有的 SVG 代码并用作响应式，我也可以提供相同的解决方案，但首先请查看这个 CSS 解决方案。

是的，这行得通。它可能会帮助其他人。但另一个符合我的要求。

【参考方案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>

【参考方案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>

【参考方案4】：

我更喜欢把这个 svg 包装到一个块 ​​div> 元素中，因为你在这个 中使用了 viewBox 属性svg 它会按比例增长或缩小。

看看这个代码快照：

<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 的 填充属性并分配一个类属性，以便您可以通过以下方式更改包装器的大小和路径颜色：

.wrap 
    width: 500px; /* the height will proportionaly grow or shrink complied with the viewBox */

.path 
    fill: red; /* specify the color as you wish */

下面是css shap，不完美但非常接近那个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>