-3
我一直在努力创建像导航栏这样的梯形,但我无法成功。这是应该的样子:如何创建像导航栏这样的倾斜梯形
如果任何人都可以至少我指向正确的方向,我会非常感激。
编辑:找到一个解决方案。下面是HTML
<ul class="slanted-tabs">
<li>
<a>Location</a>
</li>
<li>
<a>Visit Types</a>
</li>
</ul>
而且SCSS
.slanted-tabs {
position: relative;
margin-bottom: 0;
white-space: nowrap;
li {
position: relative;
display: inline-block;
padding: 1.0em 2.5em 0.1em;
color: inherit;
text-decoration: none;
z-index: 1;
a {
&.active {
background: none;
}
}
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-bottom: none;
background: #ddd;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
}
}
尝试此代码由Lea Verou http://dabblet.com/gist/6867917 – Krusader