仅倾斜元素的一侧

Question

我想得到这个图片的结果：

我试过了：

#parallelogram-container {
  margin: 0 50px;
}

.parallelogram {
    background: #008dd0;
   width: 200px;
    border:   none;
    display:   inline-block;
    height:   90px;
    -moz-transform:  scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    -webkit-transform:  scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    transform:   scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    transform-origin:  50% 50%;
    padding:   0px;
    margin:             0 1px;
}

.parallelogram:first-child {
    border-bottom-left-radius:      5px;
    border-top-left-radius:      5px;
}

.parallelogram-btn {
  width: 60px;
    background: #ffa008;
    color:   #FFF;
    border:             none;
    display:   inline-block;
    height:   90px;
    -moz-transform:  scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    -webkit-transform:  scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    transform:   scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
    border-bottom-right-radius:      5px;
    border-top-right-radius:      5px;
    transform-origin:  50% 50%;
    padding:   0px;
    margin:   0px;
    font-weight:  700;
    cursor:   pointer;
}

<div id="parallelogram-container">

    <div class="parallelogram">&nbsp;</div>

    <div class="parallelogram">&nbsp;</div>

    <a class="parallelogram-btn">&nbsp;</a>

</div>

我无法像图片那样实现：第一个平行四边形在他的左侧没有歪斜，最后一个平行四边形在他的右侧没有歪斜。

有人可以帮我吗？

Answer 1

查看代码段

#parallelogram-container {
  margin: 0 50px;
}

.parallelogram {
  position: relative;
  background: #008dd0;
  width: 100px;
  border: none;
  display: inline-block;
  height: 90px;
  padding: 0px;
  margin: 0 1px;
}

.parallelogram:nth-child(1) {}

.parallelogram:nth-child(2) {
  transform-origin: bottom left;
  -ms-transform: skew(-28deg, 0deg);
  -webkit-transform: skew(-28deg, 0deg);
  transform: skew(-28deg, 0deg);
  margin-left: 1px;
}

.parallelogram:nth-child(1):after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: #008dd0;
  transform-origin: bottom left;
  -ms-transform: skew(-28deg, 0deg);
  -webkit-transform: skew(-28deg, 0deg);
  transform: skew(-28deg, 0deg);
}

.parallelogram-btn:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: -51px;
  z-index: -1;
  background: #ffa008;
  transform-origin: bottom left;
  -ms-transform: skew(-28deg, 0deg);
  -webkit-transform: skew(-28deg, 0deg);
  transform: skew(-28deg, 0deg);
}

.parallelogram:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.parallelogram-btn {
  width: 60px;
  position: relative;
  background: #ffa008;
  color: #FFF;
  border: none;
  display: inline-block;
  height: 90px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  padding: 0px;
  margin-left: 51px;
  font-weight: 700;
  cursor: pointer;
}

<div id="parallelogram-container">
  <div class="parallelogram">&nbsp;</div>
  <div class="parallelogram">&nbsp;</div>
  <a class="parallelogram-btn">&nbsp;</a>
</div>

Answer 2

您也可以使用以下代码简单地实现这一点。在这种情况下，只需要一个 div。

从这一点开始，您当然可以微调所有内容，但这只是给您一个大概的想法。

HTML

<div class="box"></div>

CSS

.box{
  width: 400px;
  height: 100px;
  background: #008dd0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.box:after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background: #ffa008;
}

.box:before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) skew(-10deg);
  width: 40%;
  height: 100%;
  background: #008dd0;
  border: 2px solid white;
  border-width: 0 8px;
  z-index: 100;
}

.box {
  width: 400px;
  height: 100px;
  background: #008dd0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.box:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  background: #ffa008;
}
.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) skew(-10deg);
  width: 40%;
  height: 100%;
  background: #008dd0;
  border: 2px solid white;
  border-width: 0 8px;
  z-index: 100;
}

<div class="box"></div>

仅倾斜元素的一侧

Skew one side only of an element

css

transform

skew