zoukankan html css js c++ java

利用CSS3 transform: rotate(xxdeg)画对角线

直接上代码。

    <style>
        *{ /*实际开发中，别这样偷懒哦*/
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .out{
            width: 200px;
            height: 200px;
            background-color: #607D8B;
            display: flex;
            align-items: center;
            margin: 0 auto;
            position: relative;
        }
        .inner{
            border-left: 1px solid #8BC34A;
            width: 0;
            height: 282px;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            display: inline-block;
            position: absolute;
            z-index: 1;
            top: -41px;
            left: 100px;
        }
    .txt{
        display: block;
        line-height: 30px;
        z-index: 999;
        width: 150px;
        height: 150px;
        margin: auto;
        position: relative;
        background-color: #607D8B;
        font-size: 30px;
        color: #fff;
    }

    </style>

</head>
<body>
<div class="out">
    <span class="inner"></span>
    <span class="txt">一段文字，很迟才才才才才才才才才才才才</span>
</div>
</body>

效果图如下：

查看全文

相关阅读:
Python-产生随机长度的密码
 Python-双色球
 Python-产生手机号码
 Word操作笔记
 1035 最长的循环节
 B. Recover the String
uva11752 The Super Powers
UVA11754
GCD
D. Persistent Bookcase(Codeforces Round #368 (Div. 2))

原文地址：https://www.cnblogs.com/dodocie/p/7101451.html