Grow your CSS skills. Land your dream job.

Border around css-generated trapezoid

  • # March 22, 2013 at 4:00 pm

    Hello everyone,

    So I’m trying to put a 1px black border around a trapezoid generated like this:

    border-top:80px solid #C1C1C1;
    border-left:45px solid transparent;
    border-right:45px solid transparent;
    padding:0 8px 0 0;
    height:0;
    width:120px;

    But of course I’m already using borders for the trapezoid, so is there any way to ether generate the trapezoid differently or apply the 1px border differently?

    Any feedback is much appreciated,

    Cheers

    # March 22, 2013 at 4:08 pm

    pseudo element

    http://codepen.io/ChrisPlz/pen/vjkeq

    The math isn’t right for a 1px border, but the principle is there.

    # March 22, 2013 at 4:35 pm

    Awesome, Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".