css3 斜角标签

最新推荐文章于 2024-09-02 19:53:00 发布

hannaqq

最新推荐文章于 2024-09-02 19:53:00 发布

阅读量5.3k

点赞数 1

分类专栏：开发

本文链接：https://blog.csdn.net/hannaqq/article/details/47748393

版权

开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <style>
       .label{
           display: block;
           position:relative;
           width: 50%;
           height: 2em;
           background-color: #333333;
           color: #ffffff;
           font-weight: bold;
           line-height: 28px;
           text-align: center;
           float: right;
           transform: translate(25%, 20%) rotate(45deg);
           box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
           text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
       }
       a{
           font-family: 微软雅黑;
           text-decoration: none;
           cursor: auto;
       }
   </style>
</head>

<body>
   <div style="width: 200px; height: 200px; background-color: red; overflow: hidden;">
       <a href="" class="label" id="soure">个标签</a>
   </div>
</body>
</html>