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;}
 

 

 

 

 

posted @ 2020-03-31 19:03  草莓知妖妖🐰`  阅读(374)  评论(0)    收藏  举报