CSS实现纯右上角倾斜四十五度封页角以及小浮标效果

使用纯css来实现斜标

效果如图

具体代码如下

<div class="my-special-label"><div><div>人事变动</div></div>
</div>

  /*外层容器*/.my-special-label{position: absolute;right: 0}/*内层容器*/.my-special-label > div {width: 80px;height: 60px;overflow: hidden;position: relative;top: -18px;right: 10px;}/*小横标*/.my-special-label > div > div{font: bold 12px Sans-Serif;text-align: center;text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;transform: rotate(45deg);position: relative;padding: 0px;left: 17px;top: 15px;width: 80px;background-color: #e47b7b;background-image: linear-gradient(to top, #fd5656, #d60101);color: #f7f7f7;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);}/*折叠角*/.my-special-label > div > div:before {left: 0;}.my-special-label > div > div:after {right: 0;}.my-special-label > div > div:before, .my-special-label > div > div:after {content: "";border-top: 1px solid #c5053f;border-left: 1px solid transparent;border-right: 1px solid transparent;position: absolute;bottom: -1px;}

具体的详细。可以自己微调

附带一个浮标

<div style="position:absolute"> <div style="position: relative; width: 0px; height: 0px"><div class="overtime_tab" style="top: -19px; left: -35px;">超时</div></div>
</div>

  .overtime_tab {position: relative;width: 40px;text-align: center;line-height: 22px;top: -19px;border-radius: 1px 1px 4px 4px;font-size: 13px;color: white;background-image: linear-gradient(to right, #ff0000, #d20101);box-shadow: 0px 6px 3px #f2dada;}

CSS实现纯右上角倾斜四十五度封页角以及小浮标效果相关推荐

在左上角倾斜四十五度显示的TextView
2019独角兽企业重金招聘Python工程师标准>>> 这个是主Activity: public class TextViewText extends Activity { @Ove ...
[系统安全] 四十五.APT系列(10)Metasploit后渗透技术信息收集、权限提权和功能模块详解
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
【Visual C++】游戏开发笔记四十五浅墨DirectX教程十三深度测试和Z缓存专场
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8607864 作者:毛星云(浅墨 ...
Python编程基础：第四十五节方法链Method Chaining
第四十五节方法链Method Chaining 前言实践前言方法链是指一个对象一次调用其自身的多个方法,通常写作对象.方法1.方法2.由于这种调用方法看起来像一个链条,所以我们将其称作方法链. ...
四十五、深入Java的网络编程（上篇）
@Author:Runsen @Date:2020/6/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
NeHe OpenGL教程第四十五课：顶点缓存
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
JavaScript学习（四十五）—练习题
JavaScript学习(四十五)-练习题习题1 习题2:
服务器存储满了进不去系统,解决PC常见问题篇四十五：建议收藏！手贱升级进不去系统？两步简单恢复黑群晖！...
解决PC常见问题篇四十五:建议收藏!手贱升级进不去系统?两步简单恢复黑群晖! 2021-07-19 16:40:32 47点赞 302收藏 15评论创作立场声明:本文属于原创文章,无任何利益关系, ...
40岁想在职读计算机博士,年龄超过四十五岁还有机会报考在职博士吗
我国一直都在强调"活到老,学到老",所以我国正在向学习型社会发展.因此,我们每一个人都要树立终身学习的理念,只有让自己不断的进步,才不会被快速发展的社会所淘汰.有很多人想要报考在职 ...
信息系统项目管理师必背核心考点（四十五）招标投标法
科科过为您带来软考信息系统项目管理师核心重点考点(四十五)招标投标法,内含思维导图+真题 [信息系统项目管理师核心考点]招标投标法转包的情形 1.中标人应当按照合同约定履行义务,完成中标项目 2.中 ...

CSS实现纯右上角倾斜四十五度封页角以及小浮标效果

CSS实现纯右上角倾斜四十五度封页角以及小浮标效果相关推荐

最新文章

热门文章