使用CSS的滑块标题

Question

我一直在尝试使用css创建这样的图像。

我部分地实现了这个

<div class="nav-tab">
    <div class="arrow-left"></div>
    <div class="arrow"></div>
    <div class="arrow-right"></div>
</div>

CSS

div {
    float: left;
    margin: 0;
    padding: 0;
}

.arrow {
    background-color: green;
    height: 60px;
    width: 240px;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid green;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid white;
    position: relative;
    left: 30px;
}

小提琴：https://jsfiddle.net/codeandcloud/g3cmgw8y/6/ 但设计存在这些问题

1）arrow-left没有背景色透明。 （根据这种设计是否可能？）
2）我想要的是将其用作下图。当我将每个.nav-tab放入ul＆gt; li float:left输出为乱码。 小提琴：https://jsfiddle.net/g3cmgw8y/7/

我做错了什么，我应该如何解决这个问题。

Answer 1

如何使用偏斜呢？

https://jsfiddle.net/foreyez/1gf3zam3/

<div class='arrow'>
<div class='arrowtop'>
</div>
<div class='arrowbottom'>
</div>
</div>

.arrowtop {

    transform: translateX(50px) skewX(45deg); 
    width:400px;
    height:50px;
    background:red;
}

.arrowbottom {

    transform: translateX(50px) skewX(-45deg);
    width:400px;
    height:50px;
    background:red;
}

Answer 2

嗯......也许这是一个答案？

.arrow-left {
  border-top: 30px solid green;
  border-bottom: 30px solid green;  
  border-left: 30px solid transparent; 
  position:relative;
  left: 0px;
}