我需要制作类似于这样的东西:
目前我已经做出了下面这个,顺便说一下,我正在使用 Bootstrap 3。
这是我的代码:
/* nav stuff */
ul,
li,
a {
display: inline-block;
text-align: center;
}
/* appearance styling */
ul {
/* hacks to make one side slant only */
overflow: hidden;
}
li {
background-color: $white;
transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
}
li a {
padding: 3px 15px 3px 10px;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="breadcrumb">
<li><a href="">Home</a></li>
<li><a href="#">Products</a></li>
</ul>
现在我遇到的唯一问题是第一个元素 :(