Search code examples
htmlcsscss-shapes

CSS perspective shape border

I have a trapezoid, made with CSS. The issue I'm having is with the line thickness of the bottom line. I've tried adding a solid border around the shape, but the bottom line is still a few pixels thinner.

Here's the fiddle showing the trapezoid: http://jsfiddle.net/d7fuaur1/ 

.trap { 
    width: 436px;
    height: 150px;
    position: absolute;
    padding: 0px;
    left: 100px;
    text-transform:uppercase;
    text-align:center;
    padding-top:25px; 
    padding-bottom:25px;
    top: 20px;
}

.trap:before {
    content: "";
    position: absolute;
    border-radius: 2px;
    box-shadow:0 0 0px 4px #000;
    top: -4%; bottom: -11%; left: -3%; right: -3%;
    -webkit-transform: perspective(50em) rotateX(-30deg);
    transform: perspective(50em) rotateX(-30deg);
}

What can I do to get the border thickness the same all around?

Solution

  • To be honest, I'm not exactly sure how this worked

    In .trap:before

    Change

    box-shadow:0 0 0px 4px #000;

    to 

    box-shadow:0 1px 0px 4px #000;

    I just added 1px to your v-shadow field.

    [EDIT] Here's the jsfiddle for the fix.