直接放代码：
<html>
<head>
<style>
div{
width:0px;
height:0px;
border-top:30px solid #000;
border-right:30px solid #f00;
border-bottom:30px solid #0f0;
border-left:30px solid #00f;
</style>
</head>
<body>
<div></div>
</body>
2020-08-06_100252.png
将右下左边框设置成transparent透明，
.triangle{
width: 0;
height: 0;
border-top: black 30px solid;
border-right: solid 30px transparent;
border-bottom: solid 30px transparent;
border-left: solid 30px transparent;
}
此时结果是这样的
2020-08-06_101430.png
但是这样div占得地方还是一个宽高30px的正方形，可将border-bottom的宽度改为0。
根据实际需要可改成向上的，向左的，向右的三角形，通过更改宽度更改形状
2020-08-06_102956.png
网友评论