纯CSS三角形的一种方法

2012-02-10 • 伪技术,WEB事儿 • by Nornor Chen

CSS三角形

在WEB中下三角形经常表示此处还有下拉。实现CSS三角形的方法有几种,有用3个容器拼凑的,还有用纯边框实现的。今天分析一下第一种实现方法。

原理剖析:

CSS三角形原理分析

将一个顶边长5像素,高3像素的三角形放大3200倍如上图。

CSS三角形分析

从上图开始出发:

  1. 创建一个宽5,高3的DIV,display设置为内联:display:inline-block;
  2. 创建3个em,每个高度都为1px。为了让它宽度有效且独占一行,display设置为块:display:block;
  3. 第一个em的宽度为5px。第二个em的宽度为3px,且两边分别间隙为1px(margin:0 1px;)。第三个em的宽度为1px,且两边分别间隙为2px(margin:0 2px;)。

代码&演示

代码以及演示:纯CSS实现三角形的一种思路

« 文本框点击全选效果

还活着呢 »