CSS 常用样式——绘制各种角度的三角形(1)
![CSS常用样式——绘制各种角度的三角形(1)](https://static001.geekbang.org/infoq/18/18463b6560a8f32d6765e9512ec4cc02.jpeg)
1、前言
在制作前端项目时,我们经常会遇到制作下拉功能时有个小三角,除了我们用图片背景或者iconFont之外,我们可以用CSS来实现。
2、实现效果
首页我们制作一个正常的模块,添加不同颜色的边框来看下吧。
![](https://static001.geekbang.org/infoq/91/91ff53653a960df03136e6ec1fcf260d.png)
HTML代码:
CSS代码:
我们会发现每个边框给我们呈现出的是一个有棱角的四边形的渲染效果,接下来我们把这个模块的width
和height
都设为0,看下效果:
![](https://static001.geekbang.org/infoq/c0/c0ec7b5f89ac438e30a08fa93387d0be.png)
CSS代码:
这时我们发现渲染出的效果是不是有四个三角形状的图像,这就是我们模块width
和height
都设为0时,我们给它设置边框的渲染效果。
接下来我们把某一个方向的border的border-width
设为0来看下效果:
![](https://static001.geekbang.org/infoq/15/154878955f79afe5296b1fb8e437560f.png)
CSS代码:
到这里我们就可以总结出:
(1)制作三角形需要将该模块:宽度width
为0,高度height
为0;
(2)制作不同方向的类似等腰三角形时,需要将某一个方向的border-方向:高度 solid coral
,相对方向border-相对方向不设置任何参数,其他方向的border-其他方向:不同高度 solid transparent
;进设置三个方向即可。
(3)制作不同方向的类似直角三角形时,需要将上下某一个方向的border-(top|bottom):高度 solid coral
,左右某一方向的border-(left|right):相同高度 solid transparent
;仅设置两个方向即可。
3. 效果实现
(1)Triangle Up
![](https://static001.geekbang.org/infoq/15/1584d63ec6b2f43f40d3d3be4c635dd8.png)
(2)Triangle Down
![](https://static001.geekbang.org/infoq/e5/e50c6e823d27819bc96cec5e2e074036.png)
(3)Triangle Left
![](https://static001.geekbang.org/infoq/69/697010ff8f1c8c7111a6fb6a628da285.png)
(4)Triangle Right
![](https://static001.geekbang.org/infoq/d0/d01aa4ab829530e2c7c5fa120969442b.png)
(5)Triangle Top Left
![](https://static001.geekbang.org/infoq/dc/dcb5a3eaf69ea01a60f6b91278098fc4.png)
(6)Triangle Top Right
![](https://static001.geekbang.org/infoq/cd/cd5e6bc49a94cb549b8542038da141a1.png)
(7)Triangle Bottom Left
![](https://static001.geekbang.org/infoq/6f/6f3f1f9c52c5af508c7f3ec4c2872abb.png)
(8)Triangle Bottom Right
![](https://static001.geekbang.org/infoq/6d/6dab181d3139ba7abc14adf074b79d7c.png)
![](https://static001.geekbang.org/infoq/d8/d8f1e9c39675ed656ccc08dbf01365d2.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
版权声明: 本文为 InfoQ 作者【程序员学院】的原创文章。
原文链接:【http://xie.infoq.cn/article/047c6c1efa689a2ad2aa67442】。文章转载请联系作者。
评论