css实现三角形
记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,这点忽略看了,手动叹气(╥﹏╥),好在别的回答的还好,没凉😄
原理:css盒模型
标准盒模型包括: content(内容宽度width)+margin(边界)+border(边框)+padding(填充)
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
– 调整宽度大小可以调节三角形形状.
🌰1
通常, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图:
html:通用,下面省略。。。<div id=test1></div>
#test1 { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }
🌰2
通常, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图:
#test2 { 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; border-width:20px; }
🌰3
只保留最上面的颜色呢~
#test3 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent(透明) transparent transparent;
border-style:solid;
border-width:20px;
}
注:IE不支持透明transparent,会出现如下图情况,
解决办法:IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~~
(IE 6)#test4 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}
🌰4
当小三角形的斜边处在盒子对角线上时,如下图:
#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ; }
注:更改其border-width可改变三角形形状
扩展:用css实现气泡
代码:(一个三角形和一个矩形合体,控制好覆盖区域,还有很多奇思妙想可以实现,先写一个咯~)
html:
<div class="test">
<span class="bot"></span>
<span class="top"></span>
CSS “边框法”实现气泡对话框效果一
</div>
css:
.test{width:300px; padding:30px 20px; margin-left:60px; background:#009933;border-radius: 10px; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{border-width:20px;border-style:solid;border-color:#ffffff #009933 #009933 #ffffff;left:-40px;top:40px;}
.test span.top{border-width:10px 20px;border-style:dashed solid solid dashed;border-color:transparent #ffffff #ffffff transparent;left:-40px;top:60px;}