create shapes with css - html

Question

.shape {
width: 200px;
height: 50px;
background-color: green;
border-radius: 10px 10px 0 30px;
transform: skewX(0);
}
<div class="shape">Hello World!</div>
We have two following shapes in jpg format. But on certain condition background and border color needs to change to some different color. So idea is to create those images with CSS transform Property (if possible).
{ width: 200px;
height: 50px;
background-color: green;
border-radius: 10px 10px 0 30px;
transform: skewX(0);
}

Answer 1

Using SVG
.a {
fill: #ef0c4d;
stroke: #999;
stroke-miterlimit: 10;
stroke-width: 7px;
}
.a:hover {
fill: green;
stroke: blue;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680.4 240.3">
<path class="a" d="M135,113.1s7.7,123.6,13.5,164.4c6.3,44.5,13,64,168,64h490L737.7,184.3a5.6,5.6,0,0,0-4.2-3.2L140.1,108.2A4.5,4.5,0,0,0,135,113.1Z" transform="translate(-131.4 -104.7)"/>
</svg>
Using CSS
.rect {
width: 230px;
height: 100px;
overflow: hidden;
position: relative;
}
.rect:before {
content: " ";
position: absolute;
width: 200px;
height: 50px;
background: #dedede;
border-bottom-left-radius: 26px;
right: 30px;
bottom: 0;
}
.rect:after {
content: " ";
position: absolute;
width: 250px;
height: 50px;
background: #dedede;
transform: rotate(10deg) skew(30deg);
bottom: 20px;
left: -38px;
}
<div class="rect"></div>

Answer 2

It will be easier to go with SVG than pure CSS, here is an example:
path {
fill:pink;
}
path:hover {
fill:red;
stroke:#000;
}
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 64 64'
width='200' >
<path d='M18 48 L56 48 L46 30 L12 16 C8 14 8 16 8 18 L8 40 C8 44 10 48 14 48 Z' />
</svg>
You may consider this link to easily adjust the shape http://jxnblk.com/paths/?d=M18 48 L56 48 L46 30 L12 16 C8 14 8 16 8 18 L8 40 C8 44 10 48 14 48 Z

Answer 3

What are the 'certain conditions'? If you wanted to change the image color on hover with pure CSS an easy way would be to set the image as a background of a div element. You would then create a second identical image (with new color) to change to.
HTML -
<div id="color-1"></div>
and the CSS
#color-1 {
width:500px;
height:200px;
background-image:url('some/image/path');
}
#color-1:hover {
background-image:url('some-other/image/path');
}