倾斜的标签

效果图：

 

代码：

<!doctype html>
<html>
  <head>
    <title>测试案例</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://files.cnblogs.com/xiaocai38/reset.css"/>
    <style>
      .font-shadow{ margin-left:20px; padding-left:8px; width:200px; font-size:28px; color:#fff; background-color:wheat; line-height:44px; text-shadow:0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } 
    </style>
  </head>
  <body>
    <div class="clearfix">
      <div class="font-shadow">ABCDTEJIJLK</div>
      <div class="font-shadow">我们都是中国人</div>
    </div>

    <style>
      .transfor-tag{ margin-top:120px; padding-top:2px; width:300px; height:34px; line-height:32px; background:green; text-align:center; -webkit-transform:rotate(40deg); }
      .transfor-tag .tip{ display:block; height:30px; color:white; font-size:14px; border-top:1px solid #fff; border-bottom:1px solid #fff; }
    </style>
    <div class="transfor-tag"><span class="tip">斜放着的标签</span></div>
  </body>
</html>

 

posted @ 2013-09-03 16:04  小菜38  阅读(248)  评论(0)  编辑  收藏  举报