純CSS實作文章左上角Flag标簽

首先，需要一個父div：Flag所在容器。由于本例是使用絕對定位的方式實作，是以這個父div的定位方式不能使static。

其次，需要一個塊級（div即可）元素：Flag。

<div class="article">
    <div class="flag flag-left">推薦</div>
</div>
           

就這兩個元素即可。

CSS部分

首先，父容器需具有一定寬高，且定位不能是靜态的，然後它需要設定溢出元素隐藏。

.article {
    width: 700px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
           

其次，子元素需要根據父容器的尺寸進行定位和大小的調整。

.article .flag {
    position: absolute;    /*絕對定位*/
    height: 20px;
    line-height: 20px;
    text-align: center;
    width: 74px;
    background-color: #FF5722;
    color: #fff;
}
           

最總要的一點是，需要利用CSS3的transform來旋轉Flag。

.article .flag-left {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: -18px;
    top: 9px;
}
           

這裡.flag-left的旋轉是-45度，如果Flag放在右邊，則可以進行相應修改。

.article .flag-right {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: -18px;
    top: 9px;
}
           

最後說明，flag的width、height、line-height以及left、top、right等樣式需要根據需要自己衡量。