Clever Geek Handbook

CSS inverted trapezoid when width will differ

I need to make a form below that will contain text. Sometimes the text will be longer, sometimes shorter, so I can use any fixed widths.

**********
 *      *
  ******

This is the code I have - I'm wondering if there is a way that I can mark the image at the beginning and end of the range. The height will not change, so this will probably be the best in terms of cross-browser solutions ...

<div class="trapizium_holder">
    <span id="trapizium"></span>
</div>
+3


source to share


2 answers


Only one Wrapper required (IE8 +)

This script demonstrates that only one wrapper is required. It uses one pseudo-element to get angles. The wrapper must be either floating or inline. Here's the code:

Html



<div class="trapizium">
   Test text
</div>

CSS

.trapizium {
    position: relative;
    float: left; /* wrap the text */
    clear: left; /* for demo */
    margin: 10px 20px; /* left/right margin will be diagonal width */
    /* needs some set height */
    font-size: 1em;
    line-height: 1em;
    padding: .2em 0;
    background-color: cyan;
}

.trapizium:before {
    content: '';
    height: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: -20px; /* stick out into margined area */
    z-index: -1; /* make it the background */
    border: 20px solid transparent; /* left/right diagonals */
    border-top: 1.4em solid cyan;
    border-bottom: 0px solid transparent;
}
+5


source


Fiddle

#trapizium {
    border-top: 100px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}


You may want the absolute position of the text in your shapes. This uses borders to create the shape and has no height.

+1


source






More articles:


All Articles