我知道这是旧的,但我想建议使用线性渐变来实现相同的效果而不是边距偏移。这将在其原始位置保留任何内容。
http://jsfiddle.net/zwXaf/2/
HTML
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
CSS
/* reset */
ul, li, a {
margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
display: inline-block;
text-align: center;
}
/* appearance styling */
ul {
/* hacks to make one side slant only */
overflow: hidden;
background: linear-gradient(to right, red, white, white, red);
}
li {
background-color: red;
transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
-webkit-transform:skewX(-20deg);
}
li a {
padding: 3px 6px 3px 6px;
color: #ffffff;
text-decoration: none;
width: 80px;
transform:skewX(20deg);
-ms-transform:skewX(20deg);
-webkit-transform:skewX(20deg);
}