用 CSS 做个超酷的三角形开关按钮，纯前端就能实现！ - Silvana

您好，我是 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多平台发布

posted on 2026-01-27 10:17 Silvana 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部