1. 程式人生 > >css右上角文字傾斜

css右上角文字傾斜

ott 技術 aaa log abs ima -c center image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aaa{
            width:200px;
            height:200px;
            position:relative;
            background: #ccc;
            overflow: hidden;
        }
.aaa .bbb{ width:100px; height:100px; position: absolute; background: red; top:-50px; right:-50px; transform: rotate(45deg); color:#fff; } .aaa .bbb span{ position: absolute
; bottom:0; display: block; width:100px; text-align: center; } </style> </head> <body> <div class="aaa"> <div class="bbb"> <span>文字傾斜</span> </div> </div> </body> </html>

技術分享

css右上角文字傾斜