当前位置： 首页 > news >正文

【CSS】倾斜按钮

news 2026/4/2 9:52:10

效果

在这里插入图片描述

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title> Document </title><link type="text/css" rel="styleSheet" href="index.css" /></head><body><div class="container"><button type="button"><span>倾斜按钮</span> </button></div></body>
</html>

index.css

  /*设置button元素样式*/
button {width: 180px;height: 80px;/*设置button元素 背景颜色*/background: #000;/*设置button元素 无边框*/border: none;/*设置button元素 无轮廓线*/outline: none;/*设置button元素 将显示为块级元素*/display:  block;margin: 0 auto;/*设置button元素 字体颜色*/color:  #fff;/*设置button元素 字体大小*/font-size:  18px;/*设置button元素 圆角左上和右下的圆角15px*/border-radius: 15px 0;/*设置button元素 相对位置*/position: relative;/*设置button元素 倾斜-20°*/transform: skew(-20deg);
}
/*设置伪元素::before 的样式*/
button::before {content: '';/*绝对位置*/position: absolute;/*伪元素的宽度*/width: 20px;/*伪元素的高度*/height: 20px;/*伪元素的背景颜色为径向渐变背景*//*circle at 0 0 设置圆心位置-左上角*//*transparent 0 20px 从圆心开始到半径为 20px 的位置，逐渐变为透明*//*transparent 0 20px 从圆心开始到半径为 5px 的位置，逐渐变为黑色,超过5px都为黑色*/background: radial-gradient(circle at 0 0,transparent 0 20px, #000 5px);/*伪元素从父元素的底部开始绘制*/bottom: 0px;/*伪元素从父元素的左端-20px开始绘制*/left: -20px;
}/*设置伪元素::after 的样式*/
button::after {content: '';/*绝对位置*/position: absolute;/*伪元素的宽度*/width: 20px;/*伪元素的高度*/height: 20px;/*伪元素的背景颜色为径向渐变背景*//*circle at 100% 100% 设置圆心位置-右下角*//*transparent 0 20px 从圆心开始到半径为 20px 的位置，逐渐变为透明*//*transparent 0 20px 从圆心开始到半径为 5px 的位置，逐渐变为黑色,超过5px都为黑色*/background: radial-gradient(circle at 100% 100%,transparent 0 20px,#000 5px);/*伪元素从父元素的顶部开始绘制*/top: 0px;/*伪元素从父元素的右端-20px开始绘制*/right: -20px;
}button span{/*设置button span元素 将显示为块级元素*/display: block;/*抵消按钮的倾斜，让文字回正*/transform: skew(20deg);
}

相关文章：

【CSS】倾斜按钮

效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible" content"IEedge"/><meta name"viewport" content"widthdevice-…...

编程日记 2023/8/10 4:17:00

js 正则表达式

js 正则表达式 http://tool.oschina.net/regex https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions 11 22...

编程日记 2023/8/10 4:15:58

心理咨询预约管理系统javaweb医院挂号jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 心理咨询预约管理系统javaweb MVC模式&#xff0c;普…...

编程日记 2023/8/10 4:14:56

Linux中安装Node

安装 先从 官方网站 下载安装包&#xff0c;有时 node 版本太新会导致失败&#xff0c;详见下方的常见问题第2点 cd /home // 创建目录&#xff0c;将下载好的 node 安装包上传到此目录 mkdir Download mkdir /usr/local/lib/node解压 // 解压&#xff0c;前面是文件当前路径…...

编程日记 2023/8/10 4:13:55

爬虫011_元组高级操作_以及字符串的切片操作---python工作笔记030

获取元组的下标对应的值 注意元组是不可以修改值的,只能获取不能修改 但是列表是可以修改值的对吧...

编程日记 2023/8/10 4:12:54

JVM虚拟机篇

JVM组成 面试题1&#xff1a;什么是程序计数器&#xff1f; 面试题2&#xff1a;你能给我详细的介绍Java堆吗? 面试题3&#xff1a;什么是虚拟机栈&#xff1f; 面试题4&#xff1a;垃圾回收是否涉及栈内存&#xff1f; 垃圾回收主要指就是堆内存&#xff0c;当栈帧弹栈以后…...

编程日记 2023/8/10 4:11:53

Flutter 让软键盘不再自动弹起

1、问题说明&#xff1a; 在开发中&#xff0c;经常遇到这种事&#xff0c;一个页面有输入框&#xff0c;点击输入框后&#xff0c;会弹起软键盘&#xff0c;同时输入框会聚焦&#xff0c;手动收起软键盘后&#xff0c;点击另一个按钮前往下一个页面或者显示一个弹窗&#xff0…...

编程日记 2023/8/10 4:10:51

k8s 自身原理 1

咱们从 pod 一直分享到最近的 Statefulset 资源&#xff0c;到现在好像我们只是知道如何使用 k8s&#xff0c;如何按照 k8s 设计好的规则去应用&#xff0c;去玩 k8s 仔细想想&#xff0c;对于 k8s 自身的内在原理&#xff0c;我们好像还不是很清楚&#xff0c;对于每一个资源…...

编程日记 2023/8/10 4:09:48

在CPU上安装部署chatglm-6b实用经验分享

chatglm-6b很强&#xff0c;很多同学都想自己试一试&#xff0c;但不是每个人都有GPU、高端显卡的环境&#xff0c;大多数同学都是一台普通的笔记本。 笔者这里分享一下在自己的8G内存&#xff0c;intel i3笔记本上安装部署chatglm-6b的实际经验。有很多网站都分享了一些经验&…...

编程日记 2023/8/10 4:08:47

Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆 介绍mermaid下&#xff0c;Flowchat流程图语法。 目录 一.欢迎来到我的酒馆二.什么是mermiad工具三.在vs code中使用mermaid四.基本语法 二.什么是mermiad工具 2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表…...

编程日记 2023/8/10 4:07:46

分享Java技术下AutojsPro7云控代码

引言 有图有真相&#xff0c;那短视频就更是真相了。下面是三大语言的短视频。 Java源码版云控示例&#xff1a; Java源码版云控示例在线视频 核心技术&#xff1a;各个编程语言的WebSocket技术。 Java&#xff1a;Nettey、Net&#xff1a;Fleck、Python&#xff1a;Tornad…...

编程日记 2023/8/10 4:06:45

黑马机器学习day2

1.1sklearn转换器和估计器 转换器和预估器&#xff08;estimator&#xff09; 1.1.1转换器 实例化一个转换器类 Transformer调用fit_transform() 转换器调用有以下几种形式&#xff1a; fit_transformfittransform 1.1.2估计器 在sklearn中&#xff0c;估计器是一…...

编程日记 2023/8/10 4:05:43

rosdep init || rosdep update || 出错？链接失败？换源！

问题简述 本文主要解决rosdep init失败&#xff0c;rosdep update失败的问题。 rosdep init失败和rosdep update失败&#xff0c;最常见的问题就是网络链接失败。有的朋友会说“诶我使用了tz啊”&#xff0c;但是这里的链接失败对time out的要求不低&#xff0c;虽然你使用了…...

编程日记 2023/8/10 4:04:42

流量、日志分析分析

这周主要以做题为主 先找找理论看然后在buuctrf以及nssctf找了题做 了解wireshark Wireshark是一款开源的网络协议分析软件&#xff0c;具有录制和检查网络数据包的功能&#xff0c;可以深入了解网络通信中的传输协议、数据格式以及通信行为。Wireshark可以捕获发送和接收的数…...

编程日记 2023/8/10 4:03:41

Go学习第八天

签名 func (a *Account) Sign(message []byte) ([]byte, error) {hash : crypto.Keccak256Hash(message)signature, err : crypto.Sign(hash.Bytes(), a.privateKeyECDSA)if err ! nil {log.Fatal(err)}signMsg : []byte(hexutil.Encode(signature))return signMsg, err }验签…...

编程日记 2023/8/10 4:02:40

算法练习--数值相关

文章目录 整型数组合并 整型数组合并 将两个整型数组按照升序合并&#xff0c;并且过滤掉重复数组元素。 输出时相邻两数之间没有空格。 输入描述&#xff1a; 1 输入第一个数组的个数 2 输入第一个数组的所有数值 3 输入第二个数组的个数 4 输入第二个数组的所有数值 输出描…...

编程日记 2023/8/10 4:01:39

RobotFramework的安装过程及应用举例

一、安装python3.8.0 二、安装wxPython C:\>pip install -U wxPython Collecting wxPythonObtaining dependency information for wxPython from https://files.pythonhosted.org/packages/00/78/b11f255451f7a46fce2c96a0abe6aa8b31493c739ade197730511d9ba81a/wxPython-…...

编程日记 2023/8/10 4:00:38

WebGL系列教程：WebGL基础知识

下面我们来正式学习WebGL开发中的一些基本的概念和知识。 一、HTML画布 为了在 Web 上创建图形应用程序，HTML5 提供了一组丰富的功能，例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。要编写 WebGL 应用程序，就需要用到 HTML5 的画布元素。 1.1 HTML5 画布 HTML5 的标…...

编程日记 2023/8/10 3:59:37

数据的逻辑结构和存储结构

数据结构的三要素 逻辑结构存储结构顺序存储链式存储索引存储散列存储 数据的运算 逻辑结构 逻辑结构是指数据元素之间的逻辑关系&#xff0c;即从逻辑关系上描述数据。它与数据的存储无关&#xff0c;是独立于计算机的。数据的逻辑结构分为线性结构和非线性结构 线性表是典型…...

编程日记 2023/8/10 3:58:36

观察者模式（C++）

定义 定义对象间的一种一对多(变化)的依赖关系&#xff0c;以便当一个对象(Subject)的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并自动更新。 ——《设计模式》GoF 使用场景 一个对象&#xff08;目标对象&#xff09;的状态发生改变&#xff0c;所有的依赖对…...

编程日记 2023/8/10 3:57:35

别再只用Arduino了！用ESP32+TSW-30浑浊度传感器做个智能鱼缸水质监测器（附完整代码）

ESP32TSW-30浑浊度传感器打造智能鱼缸水质监测系统 养鱼爱好者都知道&#xff0c;水质是鱼类健康生长的关键因素。传统的人工检测方式不仅费时费力&#xff0c;还难以做到实时监控。今天我们就来动手打造一个基于ESP32和TSW-30浑浊度传感器的智能鱼缸水质监测系统&#xff0c;让…...

编程新知 2026/4/2 9:27:05

如何评估单网页SEO的ROI

如何评估单网页SEO的ROI 在当今的数字化时代&#xff0c;网站的成功与否往往取决于其搜索引擎优化&#xff08;SEO&#xff09;的效果。而在SEO的众多策略中&#xff0c;单网页SEO的ROI&#xff08;投资回报率&#xff09;评估尤为重要。了解如何评估单网页SEO的ROI&#xff0…...

编程新知 2026/4/2 9:25:00

2026企业AI落地必看：避开3大坑，让你的智能体真正帮你赚钱！收藏这份实战指南

本文深入探讨了企业AI智能体落地的现实难题&#xff0c;包括数据基础薄弱、单体智能体处理复杂流程能力不足以及人机协同缺失三大痛点。作者通过分析30企业案例&#xff0c;提出了针对性的解决方案&#xff1a;建立RAG架构和OCR数据清洗以夯实数据基础&#xff1b;采用多智能体…...

编程新知 2026/4/2 8:38:09

4个维度解析YetAnotherKeyDisplayer：开源实时按键可视化工具全指南

4个维度解析YetAnotherKeyDisplayer&#xff1a;开源实时按键可视化工具全指南 【免费下载链接】YetAnotherKeyDisplayer The application for displaying pressed keys of the keyboard 项目地址: https://gitcode.com/gh_mirrors/ye/YetAnotherKeyDisplayer YetAnothe…...

编程新知 2026/4/2 8:24:03

社区居家养老实训室设备配置与空间布局

社区居家养老实训室是衔接养老服务理论与实操的核心载体&#xff0c;其设备配置需贴合居家养老实际场景&#xff0c;空间布局需兼顾实操便利性与场景真实性&#xff0c;以下结合实操需求&#xff0c;分模块给出具体可落地的配置与布局方案&#xff0c;适配各类院校及培训机构建…...

编程新知 2026/4/2 8:16:01

Wan2.2-I2V-A14B企业应用：合规可控的AI视频生成私有云部署方案

Wan2.2-I2V-A14B企业应用&#xff1a;合规可控的AI视频生成私有云部署方案 1. 企业级视频生成解决方案概述 在当今内容创作需求爆炸式增长的环境下&#xff0c;企业面临着视频制作成本高、周期长的挑战。Wan2.2-I2V-A14B私有部署镜像提供了一套完整的解决方案&#xff0c;让企…...

编程新知 2026/4/2 8:03:36

个人创作者利器：AI净界RMBG-1.4，3秒完成以往30分钟的手动精修

个人创作者利器&#xff1a;AI净界RMBG-1.4&#xff0c;3秒完成以往30分钟的手动精修 1. 为什么你需要AI净界RMBG-1.4&#xff1f; 作为一名内容创作者&#xff0c;你是否经常遇到这些困扰&#xff1a; 拍摄的产品照片背景杂乱&#xff0c;需要花费大量时间手动抠图精心设计…...

编程新知 2026/4/2 7:51:31

cv_resnet101_face-detection_cvpr22papermogface真实应用：社区门禁抓拍图自动人数统计

cv_resnet101_face-detection_cvpr22papermogface真实应用&#xff1a;社区门禁抓拍图自动人数统计 1. 项目简介 今天给大家介绍一个特别实用的工具——基于MogFace模型的高精度人脸检测系统。这个工具最大的特点就是能在本地电脑上快速准确地识别人脸&#xff0c;自动统计人…...

编程新知 2026/4/2 4:55:36

Flink StateBackend详解：大数据状态存储方案

Flink StateBackend详解&#xff1a;大数据状态存储的底层逻辑与实践 关键词 Flink 流处理、StateBackend、状态存储、Checkpoint、Exactly-Once、RocksDB、FsStateBackend 摘要 在大数据实时计算领域&#xff0c;状态&#xff08;State&#xff09;是流处理从"无状态计算…...

编程新知 2026/4/2 4:35:21

公司SEO推广有哪些常见的误区需要避免

公司SEO推广有哪些常见的误区需要避免 在数字化营销的时代&#xff0c;公司SEO推广已经成为提升网站流量和品牌知名度的重要手段。在实际操作中&#xff0c;许多企业在SEO推广过程中常常犯下一些常见的误区&#xff0c;这些误区不仅影响了SEO的效果&#xff0c;还可能导致资源…...

编程新知 2026/4/2 4:05:07