CSS項下-角標效果實現

角標

1.transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

rotate(angle) 定義 2D 旋轉，在參數中規定角度

2.box-shadow 屬性向框添加一個或多個陰影。

box-shadow: h-shadow v-shadow blur spread color inset;

• transform:rotate(45deg);

• box-shadow: 0px 0px 10px #888;

/* 角標 */
/* <div class="tricon">團購</div> */
.tricon{
    width: 72px;
    height: 30px;
    background-color: ##0c60ee;
    color: #fff;
    /**/

    /**/
    position: absolute;
    top: -5px;
    right: -28px;
    /*角*/
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform:rotate(45deg);
    /**/
    -webkit-box-shadow:0px 0px 10px #888;
   -moz-box-shadow:0px 0px 10px #888; 
    box-shadow: 0px 0px 10px #888;
    /**/
    text-align: center;
    line-height: 40px;


}

 

 

box-shadow: h-shadow v-shadow blur spread color inset;