首页 学海无涯 Web前端 纯CSS实现文章左上角Flag标签
纯CSS实现文章左上角Flag标签
摘要 你一定见过某件商品的左上角或右上角一个Flag:特价、抢购、甩卖等,他们大多数使用图片+定位的方式搞定,再此我给大家介绍如何使用html+css实现类似效果。

先来张预览图


HTML部分

        首先,需要一个父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等样式需要根据需要自己衡量。


版权声明:本文由不落阁原创出品,转载请注明出处!

本文链接:http://www.leo96.com/article/detail/34

来说两句吧
最新评论
  • WY
    WY
    学习了

    毛毛小妖
    毛毛小妖 回复 WY 厉害

    2018-12-05 19:40回复

    Emil
    Emil 回复 毛毛小妖 zxc

    2019-03-20 17:14回复

  • hongsir撤回了一条消息
    hongsir撤回了一条消息
    灰常受用
  • 陈晨
    陈晨

    <p style="color:#ff5722">厉害啊兄弟</p>

  • lghCode
    lghCode
    fwfwfw

    Emil
    Emil 回复 lghCode uoi

    2019-03-20 17:14回复

    Emil
    Emil 回复 Emil uo

    2019-03-20 17:14回复

  • 毛毛小妖
    毛毛小妖
    1

    毛毛小妖
    毛毛小妖 回复 毛毛小妖 2

    2018-12-23 16:03回复

    毛毛小妖
    毛毛小妖 回复 毛毛小妖 3

    2018-12-23 16:03回复

    毛毛小妖
    毛毛小妖 回复 毛毛小妖 4

    2018-12-23 16:03回复

    ☞洋葱^O^
    ☞洋葱^O^ 回复 毛毛小妖 5

    2018-12-23 16:08回复

    ☞洋葱^O^
    ☞洋葱^O^ 回复 ☞洋葱^O^ 6

    2018-12-23 16:11回复

    放下
    放下 回复 ☞洋葱^O^ 7

    2019-01-19 15:07回复

    放下
    放下 回复 放下 8

    2019-01-19 15:07回复

    放下
    放下 回复 放下 如果回复内容太多怎么办,怎么实现·回复内容的分页加载

    2019-01-19 15:08回复

    放下
    放下 回复 放下 /

    2019-01-19 15:35回复

    放下
    放下 回复 放下 /

    2019-01-19 15:35回复

    放下
    放下 回复 放下

    2019-01-19 15:36回复

    放下
    放下 回复 放下 /

    2019-01-20 10:49回复