css教程 内容:10

纯css简单实现网站图片三角形样式

  • 查看作者
  • css实现网站图片三角形样式,网站会经常在,置顶,推荐,热门...等特殊标注场景都能够用得到,使用了transform:rotate(-30deg)属性来实现。

    html代码

    <div class="laohan"><div class="marker"><span>置顶</span></div></div>

    css样式

    .laohan{
        position: relative;
        overflow: hidden;
    }
    .marker{
        position: absolute;
        line-height: 35px;
        width: 200px;
        text-align: center;
        left: -60px;
        top: 20px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        z-index: 2;
        color: #fff;
        background:#fb3329
    }


    请登录之后再进行评论

    登录
    最新评论