一侧偏斜div

Question

由于仅在一侧拧div，我有一个问题。

• 第一个问题是放在此div中的文本也被拧紧了，但是我希望不要这样做。

• 其次是div不能彼此正确匹配。

• 第三是由于隐藏的溢出而导致的溢出，我只用它来增加一侧偏斜度，而不能在div的每个角上设定适当的边界半径。

在某个地方下方，我现在创建的内容以及它的外观。

我将不胜感激。

现在，我创建了这个：

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类，以演示另一个与另一个不同的效果。

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

给您的标签使用这种样式。

见笔

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

    }

这个想法是，如果您倾斜一个父元素，则将子元素反向倾斜以保持正常位置