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.

Can you add an image to show the expected result? – Donovan Charpin Sep 25 '13 at 06:41 — Donovan Charpin, Sep 25 '13 at 06:41

score 3 · Answer 1 · answered Sep 25 '13 at 06:43

3

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.

answered Sep 25 '13 at 06:43

MildlySerious

8,750
3
28
30

I'm still rubbing my eyes! – mavrosxristoforos Sep 25 '13 at 06:47

score 3 · Accepted Answer · edited May 23 '17 at 10:25

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 !

Thanks for your response. How can i make the content appear inside the triangle shape.http://jsfiddle.net/7qbGX/2/ — Vignesh Pichamani, Sep 25 '13 at 06:53

score 0 · Answer 3 · answered Sep 25 '13 at 06:42

0

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

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

answered Sep 25 '13 at 06:42

mavrosxristoforos

3,573
2
25
40

score 0 · Answer 4 · answered Sep 25 '13 at 06:43

0

Fiddle

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

and source

answered Sep 25 '13 at 06:43

DGS

6,015
1
21
37

score 0 · Answer 5 · answered Sep 25 '13 at 06:44

0

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 :)

answered Sep 25 '13 at 06:44

Pawcu

332
1
14

Width Customization using css

5 Answers5