如何内联 'skewed' li's 之间没有边距
How to inline 'skewed' li's with no margin between
我需要帮助将 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 形状不适用于旧版浏览器,所以我什至都没有尝试过。
我卡住了..请帮助我。
谢谢
如果我错了请纠正我,但你不能用 margin-left
这样做吗,例如:
.colors ul li{
margin-left:-6.2%
}
.colors ul li:first-child{
margin-left:0px
}
.color{
text-indent:6%
}
我需要帮助将 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 形状不适用于旧版浏览器,所以我什至都没有尝试过。
我卡住了..请帮助我。 谢谢
如果我错了请纠正我,但你不能用 margin-left
这样做吗,例如:
.colors ul li{
margin-left:-6.2%
}
.colors ul li:first-child{
margin-left:0px
}
.color{
text-indent:6%
}