Question

我需要帮助在div中放置4个内联li，但是，这些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%
}

如何在没有边距的情况下内联'倾斜'

1 个答案: