Creating a triangle in css with a gradient background

Question

I am trying to create a triangle in css with a gradient background. I have not had any success as yet. Is there way to do this to bring off this effect seen in the image bel

Answer 1

You can create a CSS triangle, but not a CSS triangle that is itself a gradient. The only trick I would suggest is to pick a color that most resembles the color within the gradient background. It just depends on how big your gradient actually is, and how well the triangle will blend in.

For the red div, you could try using the color #d94040, but then it will lack a border and a drop shadow. However, these can be added. To add a border to a CSS triangle, you can place a inside your that is also a CSS triangle that is the same size. TThis would require using absolute positioning and z-index to overlap them.

Or you can use ::after or ::before to create your CSS triangles without the added HTML code, but then that would only work in modern browsers only.