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

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

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

编辑-内联SVG代码段-

.mdf

我尝试更改此宽度，但是svg是为该特定宽度创建的，因此它没有更改。

如果有人可以帮助我使用CSS或其他我可以控制颜色和大小的方式来创建此形状，那将是很棒的。

感谢您的帮助。

这是我的解决方法

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

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

只需删除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>

这是使用伪元素的另一种想法，您只需要调整主元素的宽度/高度即可控制尺寸：

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

我宁愿将此 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 的填充属性并分配一个类属性，以便您可以通过以下方式更改包装器的尺寸和 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>

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

woshigongyunick1 回答：如何在CSS中创建此形状（带有圆角的四边形）？

大家都在问