html - 将2个div与一个具有透视图的框连接

希望创建类似这样的功能区：

目前，我的尝试如下：

下面是我写给产品的代码：

.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上看到结果here
如果我做错了什么就告诉我。
谢谢。

最佳答案

基于你的解决方案。
我注意到的第一件事是，不是沿着X轴歪斜，你应该歪斜45度沿Y轴。

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>