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;