css3实现3角形，椭圆渐变效果

原创

搜罗资料

发布于 2026-03-27 09:13:27

890

我给你最简洁、直接能用的 CSS3 实现代码：纯 CSS 画三角形 + 椭圆渐变，两种效果都能直接复制到 Next.js + Tailwind 里使用。

一、CSS3 实现三角形（4 种方向，纯 CSS）

不用图片，纯边框实现，最标准写法。

1. 向上三角形

css

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff4757;
}

2. 向下三角形

css

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #2ed573;
}

3. 向左三角形

css

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #1e90ff;
}

4. 向右三角形

css

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #ffa502;
}

二、CSS3 椭圆 + 渐变效果（超好看）

1. 椭圆形状（无渐变）

css

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50%;
}

原理：宽高不一致 + border-radius:50% = 椭圆

2. 椭圆 + 线性渐变

css

.ellipse-linear {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4);
}

3. 椭圆 + 径向渐变（最柔和）

css

.ellipse-radial {
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #a8edea 0%, #fed6e3 100%);
}

三、直接在 Next.js + Tailwind 中使用（一行搞定）

如果你项目里有 Tailwind CSS，不用写 CSS，直接用类名：

三角形（Tailwind 版）

jsx

<div className="w-0 h-0 border-l-[20px] border-r-[20px] border-b-[40px] border-l-transparent border-r-transparent border-b-red-500" />

椭圆渐变（Tailwind 版）

jsx

<div className="w-[200px] h-[100px] rounded-full bg-gradient-to-r from-pink-300 via-purple-300 to-blue-300" />

四、超简总结

三角形：用 border + transparent 实现
椭圆：width≠height + border-radius:50%
渐变：linear-gradient / radial-gradient

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

登录后参与评论

0 条评论

热度

css3实现3角形，椭圆渐变效果

css3实现3角形，椭圆渐变效果

一、CSS3 实现三角形（4 种方向，纯 CSS）

1. 向上三角形

2. 向下三角形

3. 向左三角形

4. 向右三角形

二、CSS3 椭圆 + 渐变效果（超好看）

1. 椭圆形状（无渐变）

2. 椭圆 + 线性渐变

3. 椭圆 + 径向渐变（最柔和）

三、直接在 Next.js + Tailwind 中使用（一行搞定）

三角形（Tailwind 版）

椭圆渐变（Tailwind 版）

四、超简总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐