CSS triangle>rectangle>gradient opacity

[cerotis]

Hi I'm trying to get effect such as the picture. Rectangle connected with triangle + gradient opacity. Is it possible ? Thx for help

[newseed]

Give this a look. I believe it will give you all the possibilities. Keep in mind though that CSS3 is not fully supported especially for IE9 or earlier.

[Ingolme]

You can make the gradient the background of a box and create two boxes with white borders and position them to the bottom left and bottom right to cover up the part of the gradient you don't want to see.

Here's an example of a CSS triangle:

div {width: 0;height: 0;border: 50px solid;border-color: transparent red red transparent;} <div></div>