为了方便用 border 做三角形, 省去那繁琐的思考三角朝向的问题, 自己搞了个小口诀, 分两篇, 一篇是普通的三角, 一篇是针对直角三角, 口诀如下:
普通篇:
方向朝哪哪边无,
颜色反向来弥补
直角三角篇:
直角三角分两边,
哪侧无值朝哪边,
具体颜色来填充,
要看直角在哪边,
向上直角填上边,
向下直角填下边,
topbottom 俩冤家,
从此永远不想见
针对普通篇的效果如下:
代码如下:
- .toLeft {
- width: 0;
- height: 0;
- border-width: 30px 50px 30px 0;
- border-style: solid;
- border-color: transparent #007AFF transparent transparent;
- }
demo 解析: 因为方向朝左, 所以左侧值为 0, 因为方向朝左, 颜色填充的是在右边, 符合口诀, 嘿嘿, smell 其他的就不详细说明了, 直接上效果, 如下:
代码如下:
- .toRight {
- width: 0;
- height: 0;
- border-width: 30px 0 30px 50px;
- border-style: solid;
- border-color: transparent transparent transparent #007AFF;
- }
- .toTop {
- width: 0;
- height: 0;
- border-width: 0 30px 50px 30px;
- border-style: solid;
- border-color: transparent transparent #007AFF transparent;
- }
- .toBottom {
- width: 0;
- height: 0;
- border-width: 30px 30px 0 50px;
- border-style: solid;
- border-color: #007AFF transparent transparent transparent;
- }
直角三角 demo 效果:
代码如下:
- .straightLeftTop {
- width: 0;
- height: 0;
- border-width: 100px 50px 0 0;
- border-style: solid;
- border-color: #0062CC transparent transparent transparent;
- }
demo 解析: 这个直角三角的角是在左上的, 根据口诀分析, 哪边无值在哪边, 左侧无值, 正确; 颜色填充呢, 还是因为直角的位置关系, 因为, 直角在上边, 所以颜色填充的位置在上边, 正确, 还是因为直角的关系, 因为直角在上边的, 所以 bottom 无值, 从此永远不相见, 正确其他例子如下:
代码如下:
- .straightRightTop {
- width: 0;
- height: 0;
- border-width: 100px 0 0 50px;
- border-style: solid;
- border-color: #0062CC transparent transparent transparent;
- }
- .straightLeftBottom {
- width: 0;
- height: 0;
- border-width: 0 50px 100px 0;
- border-style: solid;
- border-color: transparent transparent #0062CC transparent;
- }
- .straightRightBottom {
- width: 0;
- height: 0;
- border-width: 0 0 100px 50px;
- border-style: solid;
- border-color: transparent transparent #0062CC transparent;
- }
在自己不懂之前参考过的网址, 感谢他们: http://www.cnblogs.com/blosaa/p/3823695.html
来源: http://www.bubuko.com/infodetail-2526288.html