Creating shapes with css gradient

Question

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

i dont know about gradient, but you can create shapes with css using the border property and passing 4 parameters after it. — xhulio
– xhulio, Commented Feb 21, 2017 at 10:01
for example the following css: border-style: solid; border-width: 176px 176px 0 176px; border-color: #1e2e42 transparent transparent transparent; will give a triangle — xhulio
– xhulio, Commented Feb 21, 2017 at 10:04
Why not use SVG? In CSS it's probably easiest to transform two divs or try to use two CSS triangles like @xhulio mentioned. — Luuuud
– Luuuud, Commented Feb 21, 2017 at 10:04

Luuuud · Accepted Answer · 2017-02-21 10:08:12Z

2

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>

answered Feb 21, 2017 at 10:08

Luuuud

4,4792 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating shapes with css gradient

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related