(CSS) Can only ONE side of a box container be slanted?

[Under S.]

Me again

Is it possible to slant one side of a box container (div, span, a, etc.) so it looks like this?

(Forget the units, I just grabbed this from a Google image search to illustrate the shape.)

First question :

I know I can use transform: skewX(20deg) to make both vertical sides slant this way... but what about just one, like the drawing?

Follow-up question :

When using skewX to tilt only the 2 vertical sides, the contents (for instance, an image, or text) will slant as well, along with the container. Is there a way (short of adding an inner div angled the exact opposite way) to keep the contents straight, while the container's sides are slanted? A property, for instance.

Thanks.

[ALsp]

See this article:

The Shapes of CSS | CSS-Tricks

[Under S.]

ALsp  wrote

See this article:

The Shapes of CSS | CSS-Tricks

Thanks, but I already read that (assume I know how Google works and have read the first couple of results before tugging at the superheroes' capes for a more specific answer ) and unless I'm mistaken, that CSS Tricks page doesn't appear to address the question, as I'm not looking to create the shape with borders. I'm looking to modify the shape of the container, in a very simple way (by slanting only one of the 4 sides). This container will have contents (at the very least, a background image).

[ALsp]

You can create shapes with 3d transforms and perspective (look it up on Google). or you can create a shape mathematically with SVG (easy Google search, too).

[B i r n o u]

why would you want to use CSS for this.... is there a requirement in the specifications?

it's just a question...?? and not an ironic appreciation... I ask you that because for this kind of figure and representation I don't hesitate for a second and I ride with SVG

http://birnou.net/UnderS/forme.svg

now if this form must be a container containing HTML I often use (depending on the browser target, shapes)... but I play with shape-outside... so you have to think to model your box from the outside and not the inside... see this basic samples

Shaping from outside

[B i r n o u]

I realise that what I was explaining to think about the oposite outside/inside was probably confusing so here is an example if you need to fill the inside by the outside

Outside / inside

[ALsp]

Nice. If you change the width on the section from 100vw to 100% you will eliminate the horizontal scroll bar - if that's important.

[ALsp]

The CSS shapes spec is not supported in MS Edge. That's usually a show-stopper - if the shape is critically important to the design. If it is just for "fluff",  I would agree with you... and would have suggested it.

[pziecina]

ALsp  wrote

The CSS shapes spec is not supported in MS Edge. That's usually a show-stopper - if the shape is critically important to the design. If it is just for "fluff",  I would agree with you... and would have suggested it.

The polyfill works very well, especially if it just for a simple polygon shape.

https://alistapart.com/article/css-shapes-101

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes

polyfill -

https://github.com/adobe-webplatform/css-shapes-polyfill

[Under S.]

Feels like we're starting to stray from the original questions.

1. While transform: skewX(20deg) will successfully rotate the two vertical sides of a box container (like div, span, a, etc.) by 20 degrees without affecting the horizontal ones, is it possible -- using only CSS -- to slant only ONE side this way? (The answer is probably no, based on all my findings, I'm just seeking confirmation.)
2. Going back to the regular, compliant 'transform: skewX(20deg)' example (which tilts BOTH vertical sides -- as well as all the content in the container, including its background image -- without affecting the top and bottom, which remain perfectly horizontal)... is it possible to tell the skewX-ed container to keep its contents upright? The only method I've found to do this is to add a sub-container skewX-ed the opposite way (if the container is 20deg, then the sub-container is -20deg) and that seems a little clumsy to me.

Minimally, should work on the current versions of all 3 main browsers (which CSS shapes do not do; guess which of the 3 is lagging behind? Hint: Edge).

While I appreciate all the help I'm getting, the questions have been left purposely without context, specifically to avoid being offered alternate solutions to the problem. Just looking to know if these 2 things are do-able with native CSS / without any special code. If the answer to both questions is "none that I know of" that's cool, too. And it probably is, I'm really just looking for confirmation.

EDIT: The lack of replies suggests it is. If anyone knows otherwise, feel free to kickstart the thread again.