您好，我是 Silvana，一名前端开发工程师菜鸟。
最近捣鼓了个超有意思的小前端效果，忍不住想跟大家分享。
不用一行 JS 代码，单靠 HTML+CSS 就能做出一个带三角形动效的开关按钮，切换的时候三角形会跟着移动，还会从绿色变成红色，文字也会同步切换显示 “ON” 和 “Off”，视觉感拉满，不管是做个人练习还是加到项目里当小开关都超合适。
这个效果的核心其实就是利用 CSS 的 skew 变形、checkbox 的:checked 伪类，还有 CSS 边框做三角形的小技巧，代码量不多，我给每一行都加了注释，新手也能轻松看懂，直接复制就能跑起来。
完整源码（附详细注释）
1. HTML 文件（index.html）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><!-- 适配移动端，保证效果在手机上正常显示 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS自定义三角形形状复选框按钮</title><!-- 引入CSS样式文件 --><link rel="stylesheet" href="style.css" /></head><body><!-- 开关按钮容器，用label包裹实现点击交互 --><label><!-- 核心复选框，用于控制开关状态，隐藏原生样式 --><input type="checkbox"><!-- 关闭状态文字 --><text>Off</text><!-- 开启状态文字 --><text>ON</text><!-- 三角形装饰元素，随开关状态变化 --><span class="angle"></span></label></body>
</html>
2. CSS 文件（style.css）
/* 初始化全局样式，清除默认边距，统一盒模型 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 页面主体样式，让按钮居中显示，背景偏深色突出按钮 */
body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #2b2b2b;
}
/* 开关按钮外层容器样式 */
label {position: relative; /* 作为子元素定位的参考 */width: 120px; /* 按钮宽度 */height: 60px; /* 按钮高度 */background: #222; /* 按钮背景色 */display: flex;justify-content: space-between;align-items: center;/* 内层阴影，营造立体质感 */box-shadow: inset 0 2px 15px rgba(0,0,0,0.2),inset 0 2px 2px rgba(0,0,0,0.2),inset 0 -1px 1px rgba(0,0,0,0.2);border-radius: 10px; /* 按钮圆角 */transform: skewX(330deg); /* 按钮整体倾斜，增加设计感 */cursor: pointer; /* 鼠标悬浮显示手型 */
}
/* 隐藏原生复选框样式 */
label input {position: absolute;appearance: none; /* 取消默认样式 */
}/* 三角形元素基础样式 */
label .angle{position: absolute;/* 利用边框透明特性制作三角形 */border-left: 35px solid transparent;border-right: 35px solid transparent;border-bottom: 60px solid #0f0; /* 初始绿色三角形 */transform: skewX(30deg) scale(0.6) translateX(-16px); /* 变形调整位置和大小 */filter: drop-shadow(0 0 10px #0f0) drop-shadow(0 0 30px #0f0); /* 绿色发光效果 */transition: 0.5s; /* 过渡动画，让切换更丝滑 */
}
/* 复选框选中时，三角形样式变化 */
label input:checked ~ .angle{border-bottom: 60px solid #f00; /* 切换为红色三角形 *//* 移动位置+旋转，模拟开关滑动效果 */transform: skewX(30deg) scale(0.6) translateX(108px) rotate(180deg);filter: drop-shadow(0 0 10px #f00) drop-shadow(0 0 30px #f00); /* 红色发光效果 */
}
/* 文字通用样式 */
label text{padding: 10px;color: #fff;transition: 0.5s; /* 过渡动画 */text-transform: uppercase; /* 文字大写 */
}
/* 初始状态下“ON”文字隐藏 */
label text:nth-child(2){color: #f00; /* 红色文字 */transform: skew(30deg) scale(0); /* 缩放隐藏 */filter: drop-shadow(0 0 10px #f00) drop-shadow(0 0 30px #f00); /* 红色发光 */
}
/* 复选框选中时，显示“ON”文字 */
label input:checked ~ text:nth-child(2){transform: skew(30deg) scale(1); /* 缩放显示 */
}/* 初始状态下显示“Off”文字 */
label text:nth-child(3){color: #0f0; /* 绿色文字 */transform: skew(30deg) scale(1); /* 缩放显示 */filter: drop-shadow(0 0 10px #0f0) drop-shadow(0 0 30px #0f0); /* 绿色发光 */
}
/* 复选框选中时，隐藏“Off”文字 */
label input:checked ~ text:nth-child(3){transform: skew(30deg) scale(0); /* 缩放隐藏 */
}
写着写着就到了结尾，祝您今晚有个好梦（代码少报错一点）。
本文由mdnice多平台发布