css实现梯形样式(含有border)

类似本文热门评论 效果

.hot-comment-title{
    float:right;
    position:absolute;
    right: -8px;
    top: -30px;
    padding:  0;
    text-decoration: none;
    display: inline-block;
    z-index: 0;
    width:140px;
    height:40px;
    line-height:28px;
    text-align:right;
    padding-right:10px;
    font-size:16px;
}

.hot-comment-title::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #2486C9;
    border-bottom: none;
    -webkit-transform:perspective(1em)scale(1.1,1.3) rotateX(5deg);
    z-index: -1;
    -webkit-transform-origin:bottom right;
}

　　 border: 1px solid #2486C9;
    border-bottom: none;
    -webkit-transform:perspective(1em)scale(1.1,1.3) rotateX(5deg);
    z-index: -1;
    -webkit-transform-origin:bottom right; 核心代码

转载于:https://www.cnblogs.com/aloneCode/p/6927597.html