css 三角形

·  阅读 286

先来看一组元三角形

.triangle {
  width: 0px;
  height: 0px;
  border-top: 100px solid red;
  border-right: 100px solid salmon;
  border-bottom: 100px solid sandybrown;
  border-left: 100px solid violet;
}
复制代码

a.png

去掉对立边(避免多余空间占位), 隐藏其中两边:

.triangle {
  width: 0px;
  height: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid sandybrown;
}
复制代码

b.png

修改边大小:

.triangle {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 50px solid sandybrown;
}
复制代码

c.png

同理可得到以下方向的三角形:

b.png

另一组元三角形

分别以横纵向为主轴, 主轴保留一边, 偏轴保留一边, 就会得到如下元三角形

.chip1 {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid violet;
}
.chip2 {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid salmon;
}
.chip3 {
  width: 0;
  height: 0;
  border-bottom: 100px solid sandybrown;
  border-left: 100px solid violet;
}
.chip4 {
  width: 0;
  height: 0;
  border-bottom: 100px solid sandybrown;
  border-right: 100px solid salmon;
}
复制代码

c.png

.chip1 {
  ...
  border-left: 100px solid transparent;
}
.chip2 {
  ...
  border-right: 100px solid transparent;
}
.chip3 {
  ...
  border-left: 100px solid transparent;
}
.chip4 {
  ...
  border-right: 100px solid transparent;
}
复制代码

隐藏其中一边即可得到:

d.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改