CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

Width Customization using css

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.

Upvotes: 3

Views: 89

Answers (5)

Pawcu
Pawcu

Reputation: 322

As far as I know, there is no way to do so using your way. However there is the transform property that might help in achieving what you want although you still need to play around with it. Check this or this for further details :)

Upvotes: 0

aelor
aelor

Reputation: 11116

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 !

Upvotes: 3

DGS
DGS

Reputation: 6025

Fiddle

#sample {
    width: 0;
    height: 0;
    border-bottom: 120px solid green;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

and source

Upvotes: 0

MildlySerious
MildlySerious

Reputation: 9170

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.

Upvotes: 3

mavrosxristoforos
mavrosxristoforos

Reputation: 3643

Found this very interesting post, thanks to your interesting question:

http://css-tricks.com/snippets/css/css-triangle/

Upvotes: 0

Related Questions