商品标签例子——CSS3 transform 属性

最新推荐文章于 2024-04-29 13:33:45 发布

weixin_34087307

最新推荐文章于 2024-04-29 13:33:45 发布

阅读量152

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/zhanghuiming/p/4919582.html

版权

积累很重要。从此开始记录前端生涯的点滴....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div
        {
            width:150px;
            height:30px;
            background-color:#f83944;
            /* Rotate div */
            transform:rotate(-40deg);
            -ms-transform:rotate(-40deg); /* Internet Explorer */
            -moz-transform:rotate(-40deg); /* Firefox */
            -webkit-transform:rotate(-40deg); /* Safari 和 Chrome */
            -o-transform:rotate(-40deg); /* Opera */
            position:absolute;
            left:-50px;
            text-align:center;
        }
        .div_text{
            color:#ffffff;
            height:30px;
            line-height:30px;

        }
    </style>
</head>
<body>

<div><span class="div_text">预热</span></div>
</body>
</html>