Skip to main content
U
Under S.
Inspiring
December 23, 2018
Question

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

  • December 23, 2018
  • 3 replies
  • 5050 views

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.

    This topic has been closed for replies.

    3 replies

    U
    Under S.Author
    Inspiring
    December 24, 2018

    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.

    B i r n o u
    B i r n o u
    Legend
    December 23, 2018

    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
    B i r n o u
    Legend
    December 23, 2018

    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
    ALsp
    Legend
    December 23, 2018

    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
    ALsp
    Legend
    December 23, 2018

    See this article:

    The Shapes of CSS | CSS-Tricks

    U
    Under S.Author
    Inspiring
    December 23, 2018

    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
    ALsp
    Legend
    December 23, 2018

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices