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

给你的标签这种风格。

参见 PEN

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

    }

这个想法是，如果你正在扭曲一个父元素，倾斜反转你的子元素保持正常位置

一方倾斜div

2 个答案: