Width Customization using css

Question

Sorry for asking this type of ques. But i want to know that I have a Parent Div with height and width as 100px It looks like square. Is there is a way to customize the width alone like top-width and bottom-width

For example width is applicable for left to right and height is applicable for top to bottom If top-width is zero and bottom width is 100 ,height is 100 then it looks like triangle Here is the FIDDLE The same way i want to do with different shape. Is there is Possible to achieve that in css. Any suggestion would be great.

Answer 1

No it is not possible to do that , instead for making tringles or shapes like trapezium we use border-width like this in fiddle:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    margin:20px auto;
}

http://jsfiddle.net/7qbGX/

we make the main content of the div as 0 height and 0 width. and then use the border-width to do the trick .

The trick is that, the borders meet at corners like those in photo frames. so if we make two borders invisible and reduce the size of one . it will form a shape of a triangle. for more details you can refer to this question on so.

Cheers !

Answer 2

Well, things like that do not exist in CSS. There are some tricks like using the :before and :after selectors to combine multiple elements to make things look like expected, see this list of shapes, but they won't behave as you might expect. Things like the text flow will not work in that shape without making use of a bit of Javascript.