用带透视的方框加入2个div

Question

想要创建一个像这样的功能区:

目前,我的尝试看起来像这样:

这是我写给产品的代码:

.ribbon {
  width: 200px;
  display:inline-block;
  margin:0px; //remove any margins to prevent breaking at each element
  box-sizing:border-box; //allow paddings to not interfere with element width 
}

.front {
  float: left;
  display: inline;
  width: 45%;
  background: #EA0B1D;
  border-radius: 6px 0px 0px 6px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.middle {
  float: left;
  display: inline;
  width: 5%;
  background: #B1071D;
  padding-top: 15px;
  padding-bottom: 15px;
  transform: rotate(0deg) skewX(45deg);
  -webkit-transform: rotate(0deg) skewX(45deg);
  -ms-transform: rotate(0deg) skewX(45deg);
}

.back {
  float: right;
  display: inline;
  width: 45%;
  background: #EA0B1D;
  border-radius: 0px 6px 6px 0px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
}

span {
  color: white;
  padding: 15px;
  text-align: center;
}

<div class="ribbon">
  <div class="front">
    <span>Text</span>
  </div>
  <div class="middle">
    <span>&nbsp;</span>
  </div>
  <div class="back">
    <span>Text</span>
  </div>
</div>

您还可以在此处查看我的JSFiddle上的结果

如果我做错了,请告诉我.

谢谢.

Answer 1

根据您的解决方案.

我注意到的第一件事是,不应沿x轴倾斜,而应沿y轴倾斜45度.

transform: rotate(0deg) skewY(45deg);

这将为您提供中间部分所需的形状.

然后,只需使用内部.middle和.back类中的边距来对齐形状.

.ribbon {
  width: 200px;
  display: inline-block;
  margin: 0px;
  box-sizing: border-box;
}

.front {
  float: left;
  display: inline;
  width: 45%;
  background: #EA0B1D;
  border-radius: 6px 0px 0px 6px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.middle {
  float: left;
  display: inline;
  width: 5%;
  margin-top: 5px;                               /* added this line */
  background: #B1071D;
  padding-top: 15px;
  padding-bottom: 15px;
  transform: rotate(0deg) skewY(45deg);          /* changed skewX to skewY */
  -webkit-transform: rotate(0deg) skewY(45deg);  /* changed skewX to skewY */
  -ms-transform: rotate(0deg) skewY(45deg);      /* changed skewX to skewY */
}

.back {
  float: right;
  display: inline;
  margin-top: 10px;                              /* changed 15px to 10px */
  margin-right: 10px;                            /* added this line */
  width: 45%;
  background: #EA0B1D;
  border-radius: 0px 6px 6px 0px;
  padding-top: 15px;
  padding-bottom: 15px;
}

span {
  color: white;
  padding: 15px;
  text-align: center;
}

<div class="ribbon">
  <div class="front">
    <span>Text</span>
  </div>
  <div class="middle">
    <span>&nbsp;</span>
  </div>
  <div class="back">
    <span>Text</span>
  </div>
</div>