查看: 2106|回复: 18

[转载] 用css的border属性实现三角 [复制链接]

天狠蓝

W3C二级

Rank: 2

升级 6.11%

钱包: 0 RMB
人品: 133
注册时间: 2011-8-5
最后登录: 2012-5-12
在线时间: 82 小时

发表于 2011-9-7 12:06:21 |显示全部楼层

本帖最后由天狠蓝于 2011-9-7 12:06 编辑

先看看应用实例吧：

实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如

未命名.jpg

在浏览器中的显示如图：

点击查看demo：http://www.css88.com/demo/border/border1.html

这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。

例如这样就能得到一个颜色为#CCC的向上的三角：

未命名1.jpg

---------------------------------------------------------------------------

这个也是我最近看的一个能是实现Tip三角的比较好的一个例子分享给大家。多多指教。哈哈

已有 2 人评分	人品	收起理由
饭饭	+ 1	很给力!
Alice	+ 1	赞一个!

总评分: 人品 + 2 查看全部评分

For my life.即使閉上眼睛.世界依然還在

使用道具举报

htwo

W3C一级

Rank: 1

升级 88%

钱包: 0 RMB
人品: 97
注册时间: 2011-6-25
最后登录: 2012-5-18
在线时间: 57 小时

发表于 2011-9-13 09:00:46 |显示全部楼层

学到了，强大啊～

平台每周都挂，昵玛什么破玩意啊~

使用道具举报

ThinkC

W3C一级

Rank: 1

升级 74%

钱包: 0 RMB
人品: 57
注册时间: 2011-6-21
最后登录: 2011-11-15
在线时间: 72 小时

发表于 2011-11-11 08:38:47 |显示全部楼层

很给力。。。。。。。。。。。。

使用道具举报

huangjiangtao

W3C二级

Rank: 2

升级 36.21%

钱包: 0 RMB
人品: 167
注册时间: 2011-8-31
最后登录: 2012-5-17
在线时间: 357 小时

发表于 2011-11-11 09:49:32 |显示全部楼层

不错！！！！

走自己的前端之路让别人流言蜚语去吧。

使用道具举报

lfopt19

W3C一级

Rank: 1

升级 26%

钱包: 0 RMB
人品: 29
注册时间: 2011-8-3
最后登录: 2011-12-1
在线时间: 22 小时

发表于 2011-11-11 16:32:30 |显示全部楼层

后面这个有点不明白初学看不懂为什么要这么写

使用道具举报

寒号鸟

W3C一级

Rank: 1

升级 96%

钱包: 0 RMB
人品: 61
注册时间: 2011-10-21
最后登录: 2012-5-16
在线时间: 83 小时

发表于 2011-11-11 16:58:07 |显示全部楼层

本帖最后由寒号鸟于 2011-11-11 16:59 编辑

学会了，这样子写看得明白些：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>用border实现三角形</title>
<style type="text/css">
* {margin:0; padding:0;}
.c1,.c2,.c3,.c4 {width:0; height:0; border:24px solid #fff; float:left; margin-left:24px; display:inline;}
.c1 {border-top:24px solid #000; border-bottom:none;}
.c2 {border-right:24px solid #000; border-left:none;}
.c3 {border-bottom:24px solid #000; border-top:none;}
.c4 {border-left:24px solid #000; border-right:none;}
</style>
</head>
<body>
<div class="c4"></div>
<div class="c1"></div>
<div class="c3"></div>
<div class="c2"></div>
</body>
</html>