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

Question

我需要帮助将 4 个内联 li 放入一个 div 中，但是，这些 li 需要“水平倾斜”。 这是我需要做的:(对链接感到抱歉，但堆栈不允许我放置图片)

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

我不能使用 css transform -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%
}