如何在没有边距的情况下内联'skewed' li

Question

我需要帮助将 4 个内联 li 放在一个div 中，但是，这些 li 需要"水平倾斜"。这是我需要做的：（对链接感到抱歉，但堆栈不允许我放置图片）

https://www.flickr.com/photos/107597387@N08/

我不能使用 css 变换 -skew 工具，因为它也会扭曲元素内的内容（每个都有一个图像），并且它还会剪切第一个和最后一个框。

我尝试使用多边形剪辑路径，但我无法清除这些框之间的空间。

.HTML：

<div id="someDiv" class="colors"> <ul> <li id="c1" class="color">color1</li> <li id="c2" class="color">color2</li> <li id="c3" class="color">color3</li> <li id="c4" class="color">color4</li> </ul> </div

.CSS：

.colors ul li{
display: inline-block;
list-style: none;
float: left;
width: 25%;
height: auto;
margin-right: 0;
padding-top: 5%;
padding-bottom: 5%;
cursor: pointer;
color: white;
}
.color{
   -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
   clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
#c1{
    -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    background-color: #562b44;
    }
#c2{
    background-color: #abf6d6;
    }
#c3{
    background-color: #aa2d53;
    }
#c4{
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: #dca096;
    }

下面是一个JSFiddle，显示了正在发生的事情：https://jsfiddle.net/pnvm/zz83zxzd/3/

CSS Shapes在较旧的浏览器上尚不起作用，所以我什至没有尝试过它们。

我被卡住了。。请帮助我。谢谢

Answer 1

如果我

错了，请纠正我，但你不能用margin-left做到这一点吗，例如：

.colors ul li{
    margin-left:-6.2%
}
.colors ul li:first-child{
    margin-left:0px
}
.color{
    text-indent:6%
}