超出部分显示省略号
1 2 3
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
参考:https://blog.csdn.net/zhumengzj/article/details/80801556
三角形

1 2 3 4 5 6 7 8 9
| #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
|

1 2 3 4 5 6 7 8
| #triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
|