利用CSS3transform:rotate(xxdeg)画对角线

作者：磊磊860219 | 来源：互联网 | 2023-10-10 19:36

特殊样式的

特殊样式的对角线，装饰性对角线

直接上代码。

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

效果图如下：

推荐阅读

js
实例详解CSS3实现弹幕

项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到 ... [详细]

蜡笔小新 2023-10-17 12:33:46
uri
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
ip
C#学习教程：在Console中工作但在Windows窗体中不工作的异步代码分享

本文分享了一个关于在C#中使用异步代码的问题，作者在控制台中运行时代码正常工作，但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机，但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]

蜡笔小新 2023-12-14 15:56:00
ip
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
js
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
ip
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
ip
css 回到顶部按钮

本文由编程笔记#小编为大家整理，主要介绍了css回到顶部按钮相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 13:38:49
ip
开发笔记:10分钟了解Android的事件分发

篇首语：本文由编程笔记#小编为大家整理，主要介绍了10分钟了解Android的事件分发相关的知识，希望对你有一定的参考价值。什么是事件分发？大家 ... [详细]

蜡笔小新 2023-10-17 11:22:42
ip
Monkey《大话移动——Android与iOS应用测试指南》的预购信息发布啦！

Monkey《大话移动——Android与iOS应用测试指南》的预购信息已经发布，可以在京东和当当网进行预购。感谢几位大牛给出的书评，并呼吁大家的支持。明天京东的链接也将发布。 ... [详细]

蜡笔小新 2023-12-14 18:57:09
js
PHP图片截取方法及应用实例

本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]

蜡笔小新 2023-12-14 16:44:09
ip
Oracle中tnsnames.ora的作用和配置方法

本文介绍了Oracle数据库中tnsnames.ora文件的作用和配置方法。tnsnames.ora文件在数据库启动过程中会被读取，用于解析LOCAL_LISTENER，并且与侦听无关。文章还提供了配置LOCAL_LISTENER和1522端口的示例，并展示了listener.ora文件的内容。 ... [详细]

蜡笔小新 2023-12-14 07:44:06
foreach
PHP实现断点续传乱序合并文件的方法和源码

本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因，文件需要分割成多个部分发送，因此无法按顺序接收。文章中提供了merge2.php的源码，通过使用shuffle函数打乱文件读取顺序，实现了乱序合并文件的功能。同时，还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]

蜡笔小新 2023-12-14 04:33:19
import
dva中引入antd组件table但没有样式的问题

本文讨论了在dva中引入antd组件table时没有显示样式的问题。提供了.roadhogrc文件的配置，包括环境和import的设置。同时介绍了extraBabelPlugins和transform-runtime的使用方法，并解释了libraryName和css的含义。 ... [详细]

蜡笔小新 2023-12-09 19:53:28
import
树莓派小车3——安卓客户端

项目地址https:github.comffmydreamWiCar界面做的很难看，美工方面实在不在行。重点是按钮触摸事件的处理，这里搬了RepeatListener项目代码，例 ... [详细]

蜡笔小新 2023-10-17 15:08:33
ip
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03

磊磊860219

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章