SOURCE

<div class="sidebar-container">
  <div class="right-btn">666</div>
</div>
<div>
	<span class="tixing">梯形</span>
</div>

.right-btn{
    position: absolute;
    width: 60px;
    height: 25px;
    top: 25px;
    font-size: 14px;
    line-height: 28px;
    cursor: pointer;
    text-align: center;
}
.right-btn::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    -webkit-transform: perspective(25px) rotateX(35deg);
    transform: perspective(25px) rotateX(35deg);
    background-color: red;
}
.tixing{
	position:relative;/* *  */
	display:inline-block;
	/* z-index:1; */
}
.tixing::before{
	content: ' ';/* *  */
    position: absolute;/* *  */
    top:0;right:0;bottom:0;left:0;
    z-index:-1;
    background:#ccc;
    background-image:linear-gradient(hsla(0,0%,100%,.6),
        hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);
    border-bottom:none;
    transform: perspective(60px) rotateX(30deg);/* *  */
    transform-origin:bottom; 
    background-color:green;/* *  */
}