Css 斜线生成案例_Css 斜线/对角线整理-编程知识

Css 斜线生成案例_Css 斜线/对角线整理

news/2024/9/19 23:49:39/文章来源:https://www.cnblogs.com/tianma3798/p/18401698

一、Css 斜线，块斜线，对角线

块的宽度高度任意支持

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1 */.block {height: 100px;border: 1px solid red;position: relative;overflow: hidden;}.block::before {content: '';position: absolute;width: 0;height: 0;left: 0px;top: 0;width: 100%;height: 100%;background: linear-gradient(to right top, #00f 50%, #fff 50%);}.block::after {content: '';position: absolute;width: 0;height: 0;left: -1px;top: 1px;width: 100%;height: 100%;background: linear-gradient(to right top, #fff 50%, transparent 50%);}</style>
</head><body><div class="block"></div></body></html>

二、Css 斜线对角线，正方形对角线推荐

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 2 */.block2 {height: 100px;width: 100px;position: relative;overflow: hidden;background: yellow;margin: 50px auto;}/* 2.1 */.block2::after {content: '';position: absolute;left: 50%;top: 50%;height: 150px;width: 1px;background: #888888;transform: translate(-50%, -50%) rotate(-45deg);}</style>
</head><body><div class="block2"></div></body></html>

三、css 对角线，渐变实现，粗细度不好控制，宽高不能太大

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 3 */.block3 {box-sizing: border-box;background: yellowgreen;width: 200px;text-align: center;margin: auto;padding: 100px 0px;position: relative;}.block3::after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to right top, transparent 49%, #000, transparent 50%);}</style>
</head><body><div class="block3">张三丰的店</div>
</body></html>

Css 修改图标颜色_Css 修改图片颜色_Css控制图片颜色

CSS3 filter(滤镜) 属性使用整理

Css3 将网页变成黑白_Css3 网页黑白滤镜filter

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/793620.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

mac升级node到指定版本

node版本升级到稳定版18.16.1 (1)node -v(2)npm cache clean -f 在使用npm cache clear --force清除缓存的时候，报npm WARN using --force Recommended protections disabled的错误，有可能是镜相源过期的问题换为npm cache verify(3) sudo n stable // 把当前系统的 Node 更…

HashMap深入讲解

HashMap是Java中最常用的集合类框架，也是Java语言中非常典型的数据结构，而HashSet和HashMap者在Java里有着相同的实现，前者仅仅是对后者做了一层包装，也就是说HashSet里面有一个HashMap(适配器模式)。因此了解HashMap源码也就了解HashSet了介绍Key的存储方式是基于哈希表…

如何实现mysql高可用

1.机器资源耗尽 2.单点故障 3.认为操作 4.网络单点故障解决方案？ 1.搭建mysql主从集群（双主，一主多从，多主多从） 2. 可以用MyCat, ShardingJdbc实现A节点同步到B节点流程？1. 从库通过IO线程，连接到主库，并且向主库要对应的bin log文件 2. 主库通过dump线程获取binlog文…

基于基尼指数构建分类决策树[算法+示例]

0 前言本文主要讲述使用基尼指数构建二叉决策树的算法，并给出例题一步步解析，帮助读者理解。本文所使用的数据集：贷款.CSV。读者需要具备的知识：基尼指数计算。1 基于基尼指数的分类树构建算法选择最优特征进行分裂：对于决策树的每个节点，遍历数据集中的所有特征。对于…

Node.js版本管理工具之NVM

目录一、NVM介绍二、NVM的下载安装1、NVM下载2、卸载旧版Node.js3、安装三、NVM配置及使用1、设置nvm镜像源2、安装Node.js3、卸载Node.js4、使用或切换Node.js版本5、设置全局安装路径和缓存路径四、常用命令一、NVM介绍在工作中，不同的项目可能需要不同NodeJS版本，所以维护…

Javaweb-DQL-分组查询

select sex,avg(math) from stu group by sex;-- 1 select sex,avg(math) as 数学平均分,count() as 人数 from stu group by sex;-- 2 select sex,avg(math) as 数学平均分,count() as 人数 from stu where math>=70 group by sex;-- 3 select sex,avg(math) as 数学平均分…

AP3215 8-150V 外围简单宽输入电压降压BUCK 恒压恒流驱动器 POE、电动车、扭扭车、电瓶车、车充方案

产品描述 AP3215是一系列外围电路简洁的宽输入电压降压BUCK 恒压恒流驱动器，适用于8- 150V 输入电压范围的DC-DC 降压应用。 AP3215输出电压通过 FB 管脚设置，输出电流通过 CS 电阻设置，外围简洁，具备高效率，低功耗，低纹波 , 优异的线性调整率和负载调整率等优…

HTML 转 PDF API 接口

HTML 转 PDF API 接口网络工具 / 文件处理支持网页转 PDF 高效生成 PDF / 提供永久链接。1. 产品功能超高性能转换效率；支持将传递的 HTML 转换为 PDF，支持转换 HTML 中的 CSS 格式；支持传递网站 URL，直接转换页面成对应的 PDF 文件；转换后的 PDF 提供永久存储文件地…

[C++ Daily] 递归锁解决标准锁的典型应用

递归锁解决标准锁的典型应用先看源码:结果(在A种尝试锁住mutex_时失败,进程等待,死锁无法退出:将std::mutex 用 std::recursive_mutex替换:结果:解析: std::recursive_mutex允许同一个线程对同一个锁对象进行多次上锁,获得多层所有权.

使用 nuxi prepare 命令准备 Nuxt 项目

title: 使用 nuxi prepare 命令准备 Nuxt 项目 date: 2024/9/7 updated: 2024/9/7 author: cmdragon excerpt: 摘要：本文介绍nuxi prepare命令在Nuxt.js项目中的使用，该命令用于创建.nuxt目录并生成类型信息，以便于构建和部署。文章涵盖了命令的基本用法、指定根目录、设置…

sqlserver下利用sqlps.exe白名单绕杀软

sqlserver下利用sqlps.exe白名单绕杀软前言：在一次攻防里通过sqlserver盲注拿到一个执行命令权限，但是由于是盲注回显很有问题以及有杀软，所以利用起来非常难受而且拿不到webshell或者上线c2，所以才找到这个方法。介绍： sqlps.exe是SQL Server附带的一个具有Microsoft签…

五子棋AI：实现逻辑与相关背景探讨（上）bu

合集 - 五子棋AI：遗传算法(1)1.五子棋AI：实现逻辑与相关背景探讨（上）09-07收起绪论本合集将详细讲述如何实现基于群只能遗传算法的五子棋AI，采用C++作为底层编程语言本篇将简要讨论实现思路，并在后续的文中逐一展开了解五子棋五子棋规则五子棋是一种经典的棋类游戏，规…

Css 斜线生成案例_Css 斜线/对角线整理

相关文章