-Border属性制作三角&&斜线

---

注2: 做三角一般就用下面第一个方法就好了，四条边都加上border

用border属性制造图形（三角、梯形等）和斜线

• (1)四条边都加上border，来画三角(最常用)：这样画的三角，是四个完全一样的三角；实际操作如下
  • 首先把这个元素的width和height都设置为0,overflow设置为hidden，图像就不会被拉伸变形，中间也就不会出现空白，也不会显示元素里面的任何内容；简单说就是让元素只显示border
  • 然后 给四个方向的border都加上一个宽度,让四个方向都由border填充
  • 最后 让要画的三角形的border对应方向显示出颜色，而其它的border显示为transparent就好了
  • 三角形的高为单个border的长度，三角形的底边为两个border加起来的长度;即整个border最后的 宽度为图上短的那个的长度

<div class="triangle">gogo</div>
// 下面的样式为左边图形。正方形的边长为200px，即每个三角到中间的距离都为100px
.triangle {
    width: 0px; // 若不设置为0，则会使图像横向拉长，变为梯形等
    height: 0px; // 若不设置为0，当同时存在上下边框的时候，则会使边框中间出现空白
    overflow: hidden; // 让div中不显示内容 
    border：100px solid transform;  // 设置border宽度，transparent(透明)
    border-color: red green blue yellow; // 设置border颜色
}

// 下面的样式为右边图形。三角形的边长为200px，然后三角形的高为100px
.triangle {
    width: 0px;
    height: 0px;
    overflow: hidden;
    border：100px solid transform;
    border-color: transparent transparent transparent yellow; // 只设置了最左边的border为yellow
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mrYRZ3bp-1644806671402)(FA942801621A46019EB6185480589578)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p235m2Sj-1644806671403)(90A1068FF6064097B3A2AE42E64ADBDE)]

• (2)三条边加上border(一条边为none)，来画三角：这样画三角，是两个直角小三角和一个大三角；设置为none的border方向，相当于就把之前的正方形从对应的方向的中间切开，丢弃那部分

.triangle {
    width: 0px;
    height: 0px;
    overflow: hidden;
    border：100px solid transform;
    border-color: red green blue yellow;
    border-left: none; // 相当于把之前的正方形，从中间切开，去掉了左边
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3oOp2ZH-1644806671403)(925E2F9313354AC48438ACFD3A38E211)]

• (3)两条边加上border(相邻两条边为none)，来画三角(完全不会用到这个，如果想画直角也是用上面的三条边)：这样画三角，必须设置相邻两个方向border为none，如果是对立方向，那么不会显出出图形；

.triangle {
    width: 0px;
    height: 0px;
    overflow: hidden;
    border：100px solid transform;
    border-color: red green blue yellow;
    border-left: none; // 相当于把之前的正方形，从中间切开，去掉了左边
    border-bottom: none; 
}
// 下面这个不会显示出图形，因为设置了对立方向的border为none
.triangle {
    width: 0px;
    height: 0px;
    overflow: hidden;
    border：100px solid transform;
    border-color: red green blue yellow;
    border-left: none; // 相当于把之前的正方形，从中间切开，去掉了左边
    border-right: none; 
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-todO4UUY-1644806671403)(62E5CE9CD7D1445699E233D870914827)]

• (4)绘制扇形：这个就是先绘制出三角形，然后设置border-radius就好了，一般border-radius就为单个border的长度

.triangle {
    width: 0px;
    height: 0px;
    overflow: hidden;
    border：100px solid transform;
    border-color: transparent transparent transparent yellow; // 只设置了最左边的border为yellow
    border-radius: 100px; // 直接设置radius的长度就好了，就是扇形的边长
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hmmHFSt9-1644806671404)(7FCB1CF375814AF3A688EAC9FE4F4EA8)]