#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
![](https://i-blog.csdnimg.cn/blog_migrate/872a8150f26695026da429f30f65b32f.png)
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
![](https://i-blog.csdnimg.cn/blog_migrate/32b978a46f5a14c936d6abf316b09500.png)
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
![](https://i-blog.csdnimg.cn/blog_migrate/4818f2e02f76127555e3e0fe608e52be.png)
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
![](https://i-blog.csdnimg.cn/blog_migrate/934fa5827f7b26725766a38ef55bb529.png)
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
![](https://i-blog.csdnimg.cn/blog_migrate/079ee36da5a99f744f7adc9bd8bd406e.png)
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
![](https://i-blog.csdnimg.cn/blog_migrate/1c13513d8f8e26f52913b91dc4df9575.png)
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
![](https://i-blog.csdnimg.cn/blog_migrate/4ae0064c3118c5b26b7cfd257e8f5a01.png)
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
css3 实现圆角的三角形
background: linear-gradient(45deg, transparent 50%, #61C4CF 0%);
background-size: 16px 16px;
border-top-right-radius: 3px;
![](https://i-blog.csdnimg.cn/blog_migrate/7adafbe28bddce4f24862841454ccb46.png)