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

您可以通过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 2

我更喜欢将此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属性并分配一个类属性，以便您可以更改包装器的大小和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>

为了用样式控制svg宽度，您需要像这样删除width和height属性：
<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>
之后，您可以像这样使用css：
svg {
   width: 40px;
}

Answer 3

为了用样式控制svg宽度，您需要像这样删除width和height属性：