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

Question

I am building a widget in React Js, and in the design, this image is in the background.

My problem is the background color is dynamic and the width and height may change according to the devices. I tried using inline SVG(I can control fill color in this way but not the size) and also SVG inside img tag (I can control size in this way but not the color), but I cannot control both color and size.

Edit - inline SVG code snippet -

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

I tried changing that widht, but the svg is created for that particular width, so it's not changing.

It will be great if someone can help me to create this shape using CSS or any other way in which I can control both color and size.

Any help is appreciated.

Answer 1

Here is my solution

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 2

Just remove width , height and fill attributes and use 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

Here is a different idea using pseudo element where you only need to adjust the width/height of the main element to control the size:

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

If you want to control the color from the main element you can consider gradient:

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

Or CSS variables:

 .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

You can make shape by CSS, but the problem is for curved border:

 .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

I will prefer to wrap this svg into a block < div > element, casue you use the viewBox attribute in this svg it will grow or shrink proportionaly.

Take a look on this code snap:

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

I remove the svg 's width and height attribute, and removed path 's fill attribute and assign a class attribute so that you can change wraper's size and path color by:

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

Here below is the css shap, not perfect but very close to that 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>