MrPug MrPug - 2 months ago 22
Sass (Sass) Question

One side skewed div

I have a problem due to screwing div only on one side.


  • The first problem is that text placed in this div is also screwed however I would like it not to be.

  • Second is that divs cannot aligh properly to each other.

  • And third is tha due to overflow hidden which i use to creace only one sided skew i cannot make proper border radius at each corner of div.



Below a place what right now I created and how I would like it to look.

I would be grateful for any help.

Right now I created this:
enter image description here

HTML:

<div class="parallelogram-container">
<div class="parallelogram-left"><a href="#employee">Pracownik</a></div>
<div class="parallelogram-right"><a href="#employer">Pracodawca</a></div>
</div>


SCSS:

.parallelogram-container {
overflow: hidden;
width: 285px;
text-align: center;
.parallelogram-left {
display: inline-block;
width: 150px;
height: 45px;
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: $green;
overflow: hidden;
position: relative;
border: 1px solid transparent;
border-radius: 4px;
a {
font-family: Lato, Arial, Helvetica, Roboto, sans-serif;
font-weight: 300;
font-size: rem-calc(15);
line-height: rem-calc(20);
color: white;
}
}
.parallelogram-right {
display: inline-block;
width: 150px;
height: 45px;
left: 20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: $green;
overflow: hidden;
position: relative;
border: 1px solid transparent;
border-radius: 4px;
a {
font-family: Lato, Arial, Helvetica, Roboto, sans-serif;
font-weight: 300;
font-size: rem-calc(15);
line-height: rem-calc(20);
color: white;
}
}
}


However i would like it to look like that
enter image description here

Answer

Here's a basic example how you could accomplish some what what you want. I played around with an active class on the parallelogram-right div to demo the effect of another being different from the other.

HTML:

<div class="parallelogram-container">
  <div class="parallelogram-left"><a href="#employee">Pracownik</a></div>
  <div class="parallelogram-right active"><a href="#employer">Pracodawca</a></div>
</div>

SCSS:

$green:green;
 html,
body {
  margin: 0;
  padding: 0;
  background: white;
}
* {
  box-sizing: border-box;
}
.parallelogram-container {
  overflow: hidden;
  width: 100%;
  text-align: center;
  padding: 20px;
  a {
    font-family: Lato, Arial, Helvetica, Roboto, sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1;
    color: #CCCCCC;
    display: block;
    padding: 12px 40px;
    text-decoration: none;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
  }
  & > div {
    float: left;
    display: inline-block;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: white;
    overflow: hidden;
    position: relative;
    border: 0;
    color: #CCCCCC;
    &.active {
      background: $green;
      a {
        color: white;
      }
    }
  }
  .parallelogram-left {
    border-radius: 8px 0px 0px 8px;
    -moz-border-radius: 8px 0px 0px 8px;
    -webkit-border-radius: 8px 0px 0px 8px;
  }
  .parallelogram-right {
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 0px 0px 8px;
    -webkit-border-radius: 0px 8px 8px 0px;
  }
}

Here's a JSFiddle to play around with: https://jsfiddle.net/thepio/ctodk33m/

EDIT:

Here's the code for not skewed outer side.

CSS:

$green: green;
html,
body {
  margin: 0;
  padding: 0;
  background: white;
}

* {
  box-sizing: border-box;
}

.parallelogram-container {
  float: left;
  overflow: hidden;
  width: auto;
  text-align: center;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  a {
    font-family: Lato, Arial, Helvetica, Roboto, sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1;
    color: #CCCCCC;
    display: block;
    text-decoration: none;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
  }
  & > div {
    float: left;
    display: inline-block;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: white;
    overflow: hidden;
    position: relative;
    border: 0;
    color: #CCCCCC;
    &.active {
      background: $green;
      a {
        color: white;
      }
    }
  }
  .parallelogram-left {
    margin-left: -30px;
    a {
      padding: 12px 40px 12px 70px;
    }
  }
  .parallelogram-right {
    margin-right: -30px;
    a {
      padding: 12px 70px 12px 40px;
    }
  }
}

HTML:

<div class="parallelogram-container">
  <div class="parallelogram-left"><a href="#employee">Pracownik</a></div>
  <div class="parallelogram-right active"><a href="#employer">Pracodawca</a></div>
</div>

And here's a JSFiddle about that: https://jsfiddle.net/thepio/rgLj1t1r/

Comments