如何内联 'skewed' li's 之间没有边距

Question

我需要帮助将 4 个内联 li 放入 div，但是，这些 li 必须是 'horizontally skewed'。这就是我需要做的：（对 link 感到抱歉，但堆栈不允许我放置图片）

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

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

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

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 形状不适用于旧版浏览器，所以我什至都没有尝试过。

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

Answer 1

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

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

如何内联 'skewed' li's 之间没有边距

How to inline 'skewed' li's with no margin between

html

css

skew