Gradient helps create oblique div

Question

So, for some time I tried to achieve this form using CSS without good solutions. I need this to be an image, because this div is subject to change, and I want it to remain intact. I also tried to create an SVG that didn't work very well, I saw some people work with the gradient to create shapes, but I can't find any good guidance to point me in the right direction. Any help is appreciated :)

Answer 1

Using gradients with corners is not suitable for your case, because (as King King has already pointed out in the comments) as the width increases, the angle of the gradient (or) of the percentage of the color balance must be changed to maintain shape. It is very difficult, therefore this method can be used only when the form has fixed sizes.

However, gradients can still be used with the to [side] [side] syntax, because gradients defined using this syntax can adapt to resizing containers. This method does not use pseudo-elements.

 $(document).ready(function() { $('#increase').on('click', function() { $('.gradient').css('width', '300px').css('height', '500px'); }) }) 

 div { display: inline-block; vertical-align: top; height: 300px; width: 100px; margin: 10px; color: beige; transition: all 1s; } .gradient { padding: 10px; background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat; background-size: 100% 100px, 100% 100%; background-position: 0% 100%, 0% -100px; } /* Just for demo */ body { background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue); background: radial-gradient(circle at 50% 50%, aliceblue, steelblue); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gradient">Some content</div> <br> <br> <button id="increase">Increase Width &amp; Height</button> 

Note that it’s best to make sure that the text does not flow into the slanted section of the form, because the wrap around the text to fit into the form is not straightforward.

Answer 2

I tried to do this in css according to ur image. http://jsfiddle.net/3zkme/- See if this helps. Thank you

HTML

 <div style="margin:30px"> <div class="trapezoid"> </div> </div> 

CSS

 .trapezoid{ top: 150px; vertical-align: middle; border-bottom: 120px solid red; border-left: 200px solid transparent; border-top-left-radius:0px; height: 0; width: 150px; transform:rotate(270deg); -ms-transform:rotate(270deg); /* IE 9 */ -webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */ } /* ---------- */ .trapezoid { position:relative; } .trapezoid:after { content:' '; left:-14px; top:10px; position:absolute; background:red; border-radius:0px 0 0 0; width:164px; height:40px; display:block; } 

Answer 3

You do not use a gradient for this, you just need to use a pseudo-element, for example :after .

Code example:

 #bookmark { width: 50px; height: 100px; position: relative; background: red; } #bookmark:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 35px solid #FFF; border-right: 50px solid transparent; } 

Live jsfiddle

If you want the form to be filled with a gradient, you can do this too. Just add this to your CSS :

 background: linear-gradient(to right, #ff0000 0%,#B00000 100%);