css画个三角形

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

工作中实现页面，经常会遇到小的三角形，像一个元素框的指向图形、选择框的下拉图形等等。一开始都使用图片来实现，后面了解到使用css也可以实现效果，而且也比较简单。

具体实现

三角形主要使用border相关属性实现

1. 设置一个元素的宽高都为0
2. 元素的四个边框设置宽度，并添加颜色（该元素被分为四个三角形）

.triangle{
    width:0;
    height:0;
    border-top:50px solid #777;
    border-right:50px solid #aaa;
    border-bottom:50px solid #ccc;
    border-left:50px solid #eee;
}

3. 选取需要的三角形保留颜色，将其他的三个三角形颜色设置为透明。（这里保留顶部的三角形）

.triangle{
    border-top:100px solid #777;
    border-right:100px solid transparent;
    border-bottom:100px solid transparent;
    border-left:100px solid transparent;
}

优化的写法： 顶部的三角形和底部的边框不存在关联，因此可以不用设置底部的边框，相当于把下面的区域给裁掉了

.triangle{
    border-top:100px solid #777;
    border-right:100px solid transparent;
    border-left:100px solid transparent;
}

另外的写法： 元素还是设置宽高为0，并设置元素四个边框的宽度border-width,四个边框的样式border-style和四个边框的颜色border-color(选取需要的边框设置颜色，将其他的三个边框颜色设置为透明)，这时得到的效果是一个三角形

.triangle{
    width:0;
    height:0;
    border-width: 100px;
    border-style: solid;
    border-color: #777 transparent transparent transparent;
}

简单案例

1. 元素框的指向图形

使用上面的方法（此案例的三角形取右边的border,同理只需要让上下两个border颜色为transparent），并结合元素的伪元素、定位（元素相对定位，伪元素绝对定位）实现

.item {
  background-color: rgba(255, 255, 255, .2);
  border-radius: 10px;
  position: relative;
  padding: 20px;
}
.item:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 16px solid rgba(255, 255, 255, .2);
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
}

2. 多个列表的索引背景图

一开始可以把此案例的索引背景图当作顶部的一个等腰三角形，去掉左边的边框，就相当于截取了左边的部分，形成了现在的直角三角形

 ul li {
    width: 48%;
    height: 243px;
    background: #FBFBFB;
    border-bottom: 2px solid #ddd;
    position: relative;
    margin-bottom: 44px;
}

ul li::before{
  content: '';
  width: 0;
  height: 0;
  border-top: 97px solid #777;
  border-right: 97px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
}