CODEWITHSUNDEEP
csscss-shapeslinear-gradients
Mehar
Mehar

Reputation: 2238

Creating shapes with css gradient

How we can create the responsive shape with css gradient like the attached image.

enter image description here

Upvotes: 0

Views: 707

Answers (1)

Luuuud
Luuuud

Reputation: 4439

I've added an example for doing this with HTML and CSS. This is just one way of doing it of course.

div{
  
  height: 15px;
  
  width: 50%;
  
  background-color: black;
  
  position: absolute;
  
  top: 0;
  
}

.left{
  
  transform-origin: top right;
  transform: rotate(-5deg);
  
}

.right{
  
  left: 50%;
  
  transform-origin: top left;
  transform: rotate(5deg);
  
}
<div class="left"></div>
<div class="right"></div>

Upvotes: 2

Related Questions