仅倾斜元素的一侧[重复]答案

【问题标题】：Skew one side only of an element [duplicate]仅倾斜元素的一侧[重复]
【发布时间】：2017-04-09 18:05:21
【问题描述】：

我很想得到这张图片的结果：

我试过了：

#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>

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

有人可以帮帮我吗？

【问题讨论】：

见下面的片段

标签： css transform skew

【解决方案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>

【讨论】：

好家伙.. ！
太棒了！非常感谢！
真的很不错

【解决方案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;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：