制作HTML对角线分割双色按钮的攻略-html教程-PHP中文网

真要实现「左上红、右下蓝」且交互响应正常的对角线分割双色按钮，必须用伪元素+定位+transform skew或clip-path，而非单层linear-gradient；伪元素方案兼容性好、可控性强，clip-path方案更精确但需现代浏览器支持。

制作html对角线分割双色按钮的攻略

对角线分割双色按钮不能靠 background 单层渐变硬凑——那样只能切出斜线，但两侧颜色无法独立控制 hover 状态或点击反馈。真要实现「左上红、右下蓝」且交互响应正常，得用伪元素 + 定位 + clip-path 或 SVG 背景，而不是瞎叠两个 linear-gradient。

用 `::before` 伪元素做斜切底色层

这是最可控、兼容性好（Chrome 80+/Firefox 69+/Safari 15.4+）、支持 hover 动画的方案。核心是让主按钮承载一种颜色，::before 承载另一种，并用 transform: skewX(-45deg) 拉出对角效果。

主按钮设为 position: relative，背景色填左上区域（比如 #e74c3c）
::before 绝对定位覆盖整个按钮，背景设为右下色（比如 #3498db），宽高拉到 150%，再 transform: skewX(-45deg) translateX(-25%) 把斜块“推”进可视区
必须加 z-index: -1 确保伪元素在文字下方，否则文字被盖住
hover 时可分别改主按钮色和伪元素色，或统一加 transition: all 0.2s

示例关键 CSS：

button {
  position: relative;
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 12px 24px;
}
button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #3498db;
  transform: skewX(-45deg) translateX(-25%);
  z-index: -1;
}

`clip-path` 切三角形区域（现代写法）

如果只支持较新浏览器（Chrome 104+/Firefox 103+/Safari 16.4+），直接用 clip-path: polygon() 切两个三角形更干净，不用 skew 变形带来的像素模糊或边缘锯齿。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

按钮本身不设背景，用 background: linear-gradient(135deg, #e74c3c 50%, #3498db 50%) 铺满，再用 clip-path: polygon(0 0, 100% 0, 100% 100%) 切出右下三角
但这样只能显一层色——所以实际要用两个 div 叠在一起，各自 clip-path 切互补三角，再分别设色
注意：clip-path 在 Firefox 中对 inline 元素支持弱，务必设 display: inline-block 或 block

简单起见，推荐用伪元素方案；若项目已锁定现代浏览器且需精确三角边界，再上 clip-path。