首页 建站教程 WEB前端 正文

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg)属性来实现,具体实现代码如下:1,html代码<div class="thumb"><div class="marker"><span>精品推荐&...

纯css简单实现角标样式 css角标 前端  图1

css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg)属性来实现,具体实现代码如下:

1,html代码

<div class="thumb"><div class="marker"><span>精品推荐</span></div></div>

2,css样式代码

.thumb{
    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
}
打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢

本文链接:http://umtheme.com/web/168.html

相关推荐

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 82

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 115

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 164

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持