Buttons and divs with diagonal sides (CSS)

Question

I'm trying to make buttons and divs with diagonal sides. When I make a medium sized box (300px x 200px) it kinda works (I used :after and a rotated div), but for smaller elements like the menu and buttons it doesn't align properly. I've been stuck on this for a few hours, and don't know how to properly make them. I've also tried suggestions and examples on here and Google, but couldn't fit them to my case. If it is possible I would like to use an ul for the menu part.

Here is a image of what I want to achieve:

example

This is what I got so far: https://jsfiddle.net/3ywsrufa/ (see the jsfiddle for all of the code). It is not working properly, but you get the idea of what I was trying to do.

.box .box-top:after {
  position: absolute;
  height: 150%;
  width: 100%;
  z-index: 90;
  content: " ";
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
  transform-origin: 15% 0;
  -webkit-transform-origin: 15% 0;
  -ms-transform-origin: 15% 0%;
  left: 0px;
  top: 0px;
  background: #fff;
}

You seem to be asking for multiple unique shapes under a "diagonal side" umbrella and so I'd say this is *broad*. For slanted/diagonal sides, have a look at this - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive — Harry, May 26 '16 at 06:28
Can you show the code (html and css) that kinda works and/or doesn't align properly? — Mr Lister, May 26 '16 at 10:52

score 2 · Accepted Answer · answered Feb 27 '17 at 22:26

Even though it's been 9 months since you asked this, here's my 2¢.

I think what you're looking for is perspective on the parent element. If an image is worth a thousand words, then a live snippet is worth a thousand explanations:

#awesome-container {
    -webkit-perspective: 50em;
       -moz-perspective: 50em;
            perspective: 50em;
    -webkit-perspective-origin: 40% 40%;
       -moz-perspective-origin: 40% 40%;
            perspective-origin: 40% 40%;
}
#awesome-child {
    -webkit-transform: rotateX(20deg) rotateY(0deg);
       -moz-transform: rotateX(20deg) rotateY(0deg);
            transform: rotateX(20deg) rotateY(0deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    
    /* unrelated */
    height: 200px;
    width: 70%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #34495e;
    font-family: sans-serif;
}

<div id="awesome-container">
    <div id="awesome-child"> BADOOP </div>
</div>

This example already includes enough vendor prefixes for a lifetime supply of unsupported browsers (check the Can I use? page, the only major lack of support is IE9-).

I'd recommend you poke around with the transform, perspective and perspective-origin values to achieve your desired style.

Hopefully it's still relevant to you! (who am I kidding)

Also, to get an inner text without distortion, perhaps a pseudo-element `position: absolute` inside will do c: — Matheus Avellar, Feb 27 '17 at 22:28
Thanks for your reply :-) It is no longer needed, as in the project is already finished. But still thank you for your reply, I may still need it for a project in the future! :D — ZoFem, Mar 02 '17 at 08:03

Buttons and divs with diagonal sides (CSS)

1 Answers1