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

I need help by putting 4 inline keys in a single diagram, but those people need to be 'horizontally diagonally' is. This is what I need to do: (Sorry about the link, but the heap will not allow me to paint)

I can not use the CSS transform-scan tool Because the content inside this element will be diverted (each one has an image), and it will also cut the first and the last box

I tried to use polygon clip-path, but I Clean the place between those boxes Management can not.

HTML:

& lt; Div id = "someDiv" class = "color" & gt; & Lt; Ul & gt; & Lt; Li id = "c1" square = "color" & gt; Color 1 & lt; / Li & gt; & Lt; Li id = "c2" square = "color" & gt; Color 2 & lt; / Li & gt; & Lt; Li id = "c3" square = "color" & gt; Color 3 & lt; / Li & gt; & Lt; Li id = "c4" square = "color" & gt; Color 4 & lt; / Li & gt; & Lt; / Ul & gt;

List style: none; Swim left; Width: 25%; Height: auto; Margin-right: 0; Padding-top: 5%; Padding-down: 5%; Cursor: indicator; White color; } .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, 100% 0%, 75% 100%, 0% 100%); Clip-path: polygon (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; }

This JSW Blund is showing what's happening:

CSS shapes are no longer working on older browsers, so I have not tried them either .

I'm stuck .. Please help me please

correct me If I am wrong but you can not do it with the margin - left example:

  .colors ul li {margin-left: -6.2%}. Colors ul li: First-child {margin-left: 0 pixels} .color {text-intent: 6%}