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;}

本文链接：https://my.lmcjl.com/post/11634.html

展开阅读全文