Eine Seite verzerrt div

Question

Ich habe ein Problem aufgrund der Verschraubung div nur auf einer Seite.

Das erste Problem ist, dass Text in diesem div ist auch verschraubt, aber ich möchte es nicht sein.

Zweitens ist es so, dass divs sich nicht richtig zuordnen können.

Und drittens ist tha wegen Überlauf versteckt, die ich benutze, um nur einseitige Schieflage zu schaffen, ich kann nicht den richtigen Grenzradius an jeder Ecke von div machen.

Unter einem Platz, was ich gerade erstellt habe und wie ich es gerne aussehen würde.

Ich wäre dankbar für jede Hilfe.

Im Moment habe ich dies:

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; 
    } 
} 
} 

aber ich es so, dass

Answer 1

Hier schauen möchte ist ein einfaches Beispiel, wie Sie etwas erreichen könnten, was Sie wollen. Ich spielte mit einer active Klasse auf dem Parallelogramm-rechten Div, um die Wirkung eines anderen zu demonstrieren, das sich von dem anderen unterscheidet.

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; 
    } 
} 

Hier ist ein JSFiddle zu spielen, um: https://jsfiddle.net/thepio/ctodk33m/

EDIT:

Hier ist der Code für nicht schief Außen Seite.

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> 

Und hier ist ein JSFiddle darüber: https://jsfiddle.net/thepio/rgLj1t1r/

Answer 2

gibt einen Tag mit diesem Stil.

Siehe PEN

a{ 
     transform: skew(-20deg); 
     -ms-transform: skew(-20deg); 
     -webkit-transform: skew(-20deg); 
      display: block; 

    } 

Die Idee ist, wenn Sie ein übergeordnetes Element werden schief ausgegeben, Skew inverse Ihre Kind Elemente