css画三角形 - 技术栈

css画三角形

以对_2024-05-15 19:26

使用border

js 复制代码

div {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

如果想要单个的三角形，把其它三边的颜色设为transparent即可

使用 conic-gradient 绘制三角形

js 复制代码

div {
  background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}

使用 clip-path 绘制三角形

js 复制代码

div {
  background: deeppink;
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}