html - 倒梯形导航

Question

我想制作一个倒置的梯形，我想用作导航栏。

类似于这张图片:

Answer 1

你可以试试这个

.nav>li>a, .nav>li>a:active, .nav>li>a:focus, .nav>li>a:hover {
    display: inline-block!important;
    position: relative!important;    
    color: #fff;
    text-transform: uppercase;
    margin-left: 60px;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.3);
    padding: 0!important;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.nav li a span {
    display: inline-block;
    position: relative;
    padding: 15px 40px;
    background: #ea9c0c;
}

.nav li a:after{
  content:"";
  width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 100px solid transparent;
}

.nav li a:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 50px solid #ea9c0c;
    border-right: 47px solid transparent;
    position: absolute;
    top: 0;
    right: -47px;
    z-index: 1;
}

.nav li a:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 50px solid #ea9c0c;
    border-left: 47px solid transparent;
    position: absolute;
    top: 0;
    left: -47px;
    z-index: 1;
}

.nav li a span:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 50px solid rgba(0,0,0,0.3);
    border-right: 47px solid transparent;
    position: absolute;
    top: 4px;
    right: -47px;
}

.nav li a span:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 50px solid rgba(0,0,0,0.3);
    border-left: 47px solid transparent;
    position: absolute;
    top: 4px;
    left: -47px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav">
 <li><a href="#"><span>Home</span></a></li>
</ul>