ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、视频、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>[danger]CSS绘制三角形 ---- 1. 首先你要知道, border是梯形的, 而且border是占可视范围的 ~~~ width: 0; height: 0; border-left: 100px solid black; border-right: 100px solid red; border-bottom: 100px solid yellow; border-top: 100px solid blue; ~~~ 代码效果: ![](https://box.kancloud.cn/a5740ed9d92f1f73730d708711cabcaf_208x217.png) 2. 所以我们只需要设置其他三边为白色/transparent就可以只看到黑色三角形了 ~~~ width: 0; height: 0; border-left: 100px solid black; border-right: 100px solid white; border-bottom: 100px solid white; border-top: 100px solid white; ~~~ 代码效果: ![](https://box.kancloud.cn/1c95ec272e481f1d1d57c9ed2fe280bd_239x216.png) >[danger] CSS绘制拉伸三角形 --- 其实就是设置边框的大小, 上下小一点,左边是4倍,右侧nome ![](https://img.kancloud.cn/25/a6/25a6865947f5801017ea87a237a4d499_200x100.png) 样式如下: ``` width: 0; height: 0; border-left: 200px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: none; ```