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

最新推荐文章于 2025-06-25 11:44:23 发布

转载最新推荐文章于 2025-06-25 11:44:23 发布 · 846 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dodocie/p/7101451.html

本文介绍了一种使用CSS实现特殊布局的方法，通过旋转线条与文本块相结合，形成独特的视觉效果。文章提供了完整的代码示例，包括HTML结构和CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码。

    <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>