直角梯形实现方法

1.   float元素显示只能由本身的line-height,height,margin,padding来调节

      绝对定位元素位置才可以用top,left调节

      float元素定位与上一个元素和父元素都有关，而绝对定位元素定位时与上一个元素没有关系，只与父元素有关

2. 

上图中直角矩形css实现方法：

.tixing{
     height:0px;
    width:40px;
    border-top: 25px solid red;
     border-right:20px solid transparent;
     position:absolute;
     top:0px;
    left:0px;
 }

也可以设置爆款的背景色+css设置三角形实现：

<div class="pic">
                    <span>
                        爆款
                    </span>
</div>

css如下：

.temaihui .bd .pic{
    position: relative;
}
.temaihui .bd  .pic span{
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 20px;
    background-color: red;
    text-align: center;
    font-size: 12px;
    color:white;
    line-height: 20px;
}
.temaihui .bd  .pic span:before{
    content:"";
    position: absolute;
    top: 0;
    left: 38px;
    width: 0px;
    height: 0px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-top:20px solid red;
    border-right:8px solid transparent;
}