Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
See this article:
Copy link to clipboard
Copied
ALsp wrote
See this article:
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).
Copy link to clipboard
Copied
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).
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Nice. If you change the width on the section from 100vw to 100% you will eliminate the horizontal scroll bar - if that's important.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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 -
Copy link to clipboard
Copied
Feels like we're starting to stray from the original questions.
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.