纯css画三角形/梯形（兼容ie6）

代码很简单也很容易理解，及用css盒模型来实现效果

实例：宽高为0的话是三角形，否则是梯形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.triangle{width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;border-width: 12px;}.trapezoidal{width: 12px;height: 12px;border-style: solid;border-color: green transparent transparent transparent;border-width: 12px;}</style>
</head>
<body><div class="triangle"></div><div class="trapezoidal"></div>
</body>
</html>

效果：

当然也可以把另外三遍设为 *背景色*来实现效果，也可以尝试下把三边设为不同的颜色，宽度效果也很炫酷

为了兼容ie6，border-style和font-size,line-height，overflow都要改下

#test {height:0;width:0;overflow: hidden; /* 这里设置overflow, font-size, line-height */font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */border-color:#FF9600 #3366ff #12ad2a #f0eb7a;border-style:solid dashed dashed dashed;/*ie6不支持颜色透明，可将边框设为dotted或dashed*/border-width:20px;
}

效果同上

更通用的，不用考虑兼容性的写法，用字符实现三角形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>
.box{height:80px;
width: 300px;line-height:80px;
border-radius: 10px;margin-bottom:30px; padding-left:2em;background:#f3961c; position:relative;
}
.diamond{height:60px;line-height:60px; font-size:60px; color:#f3961c; position:absolute; z-index: -1;left:60px; bottom:-30px;
}
</style>
</head>
<body><div class="box"><span class="diamond">◆</span>字符法实现底部90度尖角对话框
</div>
</body>
</html>

效果：

气泡框实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{position: relative;width: 100px;height: 60px;line-height: 60px;background: blue;border-radius: 5px;}.box:after{content: "";width: 0;overflow: hidden;border-style: solid;border-color: blue transparent transparent transparent;position: absolute;bottom: -32px;right: 20px;border-width: 12px 6px 20px 18px;}</style>
</head>
<body><div class="box">hellow word!</div>
</div>
</body>
</html>

效果：

参考文章http://caibaojian.com/css-border-triangle.html#t7

纯css画三角形/梯形（兼容ie6）相关推荐

理解纯CSS画三角形
pure css draw a triangle 我们有这样一个边框 .d1 { width: 200px; height: 200px; border-top: 10px solid yellow; ...
css画带边框三角形,纯CSS画三角形（带边框）
实例一: Title .find-div-body{ position: relative; top:30px; right:0px; width:400px; height:200px; paddi ...
HTML之CSS画三角形原理,使用css画三角形的方法代码
用纯css画个三角形以下是源代码: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/ ...
html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
CSS画三角形及其原理
搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparen ...
5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...

纯css画三角形/梯形（兼容ie6）

纯css画三角形/梯形（兼容ie6）相关推荐

最新文章

热门文章