Responsive CSS shapes

[Ravingdork]

I’m trying to create a flag-shaped sidebar with padded body text in it. The problem is, the reference I found only shows how to use absolute values such as pixels. I need the sidebar to be responsive like the rest of the site, but every time I try to use something like percentages, the shape falls apart.

The Reference I was using:
https://css-tricks.com/examples/ShapesOfCSS/

[Paulie_D]

It depends on what you are trying to do. Perhaps you could make a Codepen.

Here’s a comment I made from a similar question yesterday

It depends what you mean by responsive.

Fixed px value borders…obviously not responsive.

em value based borders, a little better, they react to font size.

vh/vw value based borders, marginal but at least they react to viewport size.

% based borders – don’t exist.

Also, perhaps related this question that’s been ‘raging’

https://css-tricks.com/forums/topic/adding-on-a-triangle/
So…what’s the question again?

[Ravingdork]

I want my flag shape to adjust in width according to the device being used to view it. It’s currently serving as one of two columns in my layout. I can make everything else in the layout responsive easily enough, but my left column/flag remains inflexible. All my attempts thus far to make it flexible destroy the flag shape.

[Paulie_D]

Show us what you have in a Codepen.io demo and we’ll see what we can do.

Can’t work with code we haven’t seen.

[Author]

Posts