CODEWITHSUNDEEP
htmlcssreactjssvgcss-shapes
Jerin A Mathews
Jerin A Mathews

Reputation: 8712

How to create this shape (quadilateral with rounded corners) in CSS?

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

Create thi shape in css

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.

Upvotes: 1

Views: 467

Answers (4)

Arseniy-II
Arseniy-II

Reputation: 9225

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274076

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>

Upvotes: 1

Anmol Juneja
Anmol Juneja

Reputation: 325

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>

Upvotes: 2

1Cr18Ni9
1Cr18Ni9

Reputation: 1867

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>

Upvotes: 0

Related Questions