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

效果图如下：

推荐阅读

web
实例详解CSS3实现弹幕

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

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

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

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

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

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

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

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

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

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

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

蜡笔小新 2023-12-09 03:01:43
request
开发笔记:10分钟了解Android的事件分发

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

蜡笔小新 2023-10-17 11:22:42
function
css div中文字位置_超赞的 CSS 阴影技巧与细节

本文的题目是CSS阴影技巧与细节。CSS阴影，却不一定是box-shadow与filter:drop-shadow，为啥？因为使用其他属性 ... [详细]

蜡笔小新 2023-10-17 08:15:59
php
Vue项目优化上线

1.移除consol.log()的babel插件安装：npmibabel-plugin-transform-remove-console-D配置：babel.config.js：这 ... [详细]

蜡笔小新 2023-10-17 07:57:34
web
Python高级之网络编程及TCP/IP协议簇的OSI七层模型介绍

本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容，主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]

蜡笔小新 2023-12-14 18:16:27
import
Python3中选择文件对话框的格式打开和保存图片

本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数，可以方便地选择要打开或保存的图片文件，并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]

蜡笔小新 2023-12-14 17:46:55
php
Metasploit攻击渗透实践

本文介绍了Metasploit攻击渗透实践的内容和要求，包括主动攻击、针对浏览器和客户端的攻击，以及成功应用辅助模块的实践过程。其中涉及使用Hydra在不知道密码的情况下攻击metsploit2靶机获取密码，以及攻击浏览器中的tomcat服务的具体步骤。同时还讲解了爆破密码的方法和设置攻击目标主机的相关参数。 ... [详细]

蜡笔小新 2023-12-14 12:14:09
php
如何用GStreamer删除H264格式的中间部分视频

本文讨论了如何使用GStreamer来删除H264格式视频文件中的中间部分，而不需要进行重编码。作者提出了使用gst_element_seek(...)函数来实现这个目标的思路，并提到遇到了一个解决不了的BUG。文章还列举了8个解决方案，希望能够得到更好的思路。 ... [详细]

蜡笔小新 2023-12-10 08:46:57
import
dva中引入antd组件table但没有样式的问题

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

蜡笔小新 2023-12-09 19:53:28
import
为什么三角形与菜单背景的颜色不同？ - Why is the triangle a different colour shade to the menu background?

Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]

蜡笔小新 2023-10-16 11:26:13

磊磊860219

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

Tags | 热门标签

RankList | 热门文章