一侧倾斜 div

Question

我有一个问题，因为只在一侧拧 div。

第一个问题是放置在这个 div 中的文本也被搞砸了，但我希望它不会被搞砸。
其次是div之间不能正确对齐。
第三个是由于溢出隐藏，我只用它来创建单边倾斜我无法在 div.
[= 的每个角处制作适当的边界半径39=]

下面是我现在创建的内容以及我希望它的外观。

如有任何帮助，我将不胜感激。

现在我创建了这个：

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

不过我希望它看起来像那样

Answer 1

这是一个基本示例，您可以如何完成一些您想要的事情。我在右边的平行四边形 div 上玩了一个 active class 来演示另一个与另一个不同的效果。

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

这是一个可以玩的 JSFiddle：https://jsfiddle.net/thepio/ctodk33m/

编辑：

这是不倾斜外侧的代码。

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>

这是一个关于此的 JSFiddle：https://jsfiddle.net/thepio/rgLj1t1r/

Answer 2

给你的标签这种风格。

见PEN

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

    }

The idea is if you are skewing a parent element, skew inverse your child elements to retain normal position

一侧倾斜 div

One side skewed div

css

button

sass

skew