DEV Community

Discussion on: Drawing a triangle with CSS

View post

Replies for: Another con for clip-path is that you can't use box-shadow to create a shadow (you can use filter: drop-shadow() instead). Outside of the realm of...

Collapse
 
alvaromontoro profile image
Alvaro Montoro •

I agree, but one thing: clip-path will hide the shadow from a filter too.

Collapse
 
robole profile image
Rob OLeary •

If you extend the clip-path beyond the base, you can include it.

Something like this gives you a 2px drop shadow..

 .triangle {
        background-color: red;
        width: 200px;
        height: 100px;
        margin: 0 auto;
        clip-path: polygon(50% 0%, 0% 200%, 100% 200%);
        filter: drop-shadow(0px 2px 0 black);
      }
Enter fullscreen mode Exit fullscreen mode

jsfiddle.net/robjoeol/68d350zr/9/