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
– Donovan Charpin

2013-09-25 06:41:16 +00:00
Commented Sep 25, 2013 at 6:41 — Donovan Charpin
– Donovan Charpin, Commented Sep 25, 2013 at 6:41

Community · Accepted Answer · 2017-05-23 10:25:37Z

3

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 !

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Sep 25, 2013 at 6:44

aelor

11.2k3 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vignesh Pichamani Over a year ago

Thanks for your response. How can i make the content appear inside the triangle shape.jsfiddle.net/7qbGX/2

MildlySerious · Accepted Answer · 2013-09-25 06:43:27Z

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, 2013 at 6:43

MildlySerious

9,2403 gold badges31 silver badges31 bronze badges

1 Comment

mavrosxristoforos Over a year ago

I'm still rubbing my eyes!

mavrosxristoforos · Accepted Answer · 2013-09-25 06:42:56Z

0

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

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

answered Sep 25, 2013 at 6:42

mavrosxristoforos

3,6833 gold badges27 silver badges44 bronze badges

Comments

DGS · Accepted Answer · 2013-09-25 06:43:59Z

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, 2013 at 6:43

DGS

6,0251 gold badge23 silver badges37 bronze badges

Comments

Pawcu · Accepted Answer · 2013-09-25 06:44:40Z

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, 2013 at 6:44

Pawcu

3221 silver badge14 bronze badges

Collectives™ on Stack Overflow

Width Customization using css

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related