CSS Polygons

Out of context: Reply #6

  • Started
  • Last post
  • 6 Responses
  • voiceof1

    @dbloc, Here's the vanilla css version.

    .your-shape {
    position: relative;
    display: block;
    height: 2.5em;
    width: 80%;
    max-width: 16.25em;
    color: #fff;
    line-height: 2.5em;
    background-color: #333;
    text-align: center;
    }
    .your-shape:before,
    .your-shape:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.25em;
    border-color: transparent;
    }

    .your-shape:after {
    right: -1.25em;
    border-right-width: 0;
    border-left-color: #333 !important;
    }

    .your-shape:before {
    left: -1.25em;
    border-left-width: 0;
    border-right-color: #333 !important;
    }

    voiceof 1Permalink
    UpvoteDownvote
    Flag
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread