CODEWITHSUNDEEP
htmlcss
Jitender
Jitender

Reputation: 7971

create shapes with css

.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);
}

enter image description here

Upvotes: 2

Views: 306

Answers (3)

Gautam Naik
Gautam Naik

Reputation: 9348

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>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272734

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

Upvotes: 3

NightPorter
NightPorter

Reputation: 171

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');
}

Upvotes: -1

Related Questions