css - Is it possible to create angle cut using pseudo element? -

i've created fiddle better show i'm trying ask. angle crop of pseudo element

here's image showing desired result:

li.active::after {     content: '';     position: absolute;     background: #fff;     width: 10em;     height: 100%;     height: 20em;     top: 5%;     left: 15%;     transform: rotate(-75deg); } 

what i'm looking have li active class display colored background cropped angled @ bottom.

• it should adapt length of link
• needs see through background
• include angle part within link
• be responsive

is possible in pure css?

the best way have found in pure css using background-image property linear-gradient, going 1 color transparent.

you can use color of element mask, or can use background. difference how define gradient angle , gradient color.

in example, have used object color effect: http://jsfiddle.net/948ud6f7/

you notice pretty jagged , not crisp if use image. not sure of workaround yet, different browsers render edges differently, @ least gives starting point.

good luck!