请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

CSS描边原理及绘制三角形

 

CSS 盒模型:

e804b4094a31ce4f07ed841879a1fcd5.png

其中,在上下左右的边框交界处,都形成了斜线,利用这一特性,我们可以通过设置不同的上下左右边框的宽度和颜色,可以得到小三角、小梯形等;调整宽度大小可以调节三角形的形状。

示例 1

我们首先尝试上下左右颜色区分,并将 border 的宽度给大一点,看看效果。

div {

height: 30px;

width: 30px;

border-width: 30px;

border-style: solid;

border-color: #cd1076 #bf3eff #b3ee3a #6495ed;

}

f849a64ff86cbbf64f7abed9940a0194.png

示例 2

接下来我们把 content 宽度设置为 0

div {

height: 0;

width: 0;

border-width: 30px;

border-style: solid;

border-color: #cd1076 #bf3eff #b3ee3a #6495ed;

overflow: hidden; /* 这里设置overflow, font-size, line-height */

font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */

line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */

}

bb27adbf8be3ea56a686eb65678d79b1.png

这时我们可以看到,已经出现了四个颜色不同的三角形了。

示例 3

接下来我们把其中三种颜色设置为和背景颜色一样,只保留一种颜色的对比,代码如下:

3a449514db17b75c21cda65c33c10b27.png

IE6 下

在 IE6 下,不支持透明,需要将余下三条边的 border-style 设置为 dashed 即可。

代码如下:

div {

height: 0;

width: 0;

border-width: 30px;

border-style: solid dashed dashed dashed;

border-color: #cd1076 transparent transparent transparent;

overflow: hidden;

font-size: 0;

line-height: 0;

}

示例 4

同理,我们消去相邻的两个三角形,会得到一个以对角线为斜边的大三角形。

div {

height: 0;

width: 0;

border-width: 30px;

border-style: solid dashed dashed dashed;

border-color: #cd1076 #bf3eff transparent transparent;

overflow: hidden;

font-size: 0;

line-height: 0;

}

c27f7bbfa357e7bca031c1e4c7703d58.png

示例 5

这样我们设置 border-width 为不同的值:

div {

height: 0;

width: 0;

border-width: 20px 40px 30px 20px;

border-style: solid;

border-color: #cd1076 transparent transparent transparent;

overflow: hidden;

font-size: 0;

line-height: 0;

}

b1be1ff9d659c1e6fff94896a0241dd7.png

就是说我们只要设置不同的宽度值,可以得到任意形状的三角形,完美。

注意:用来绘制三角形的必须是 block 元素。


回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。