有时候候大家的网页页面会必须那样的一些提醒框或是叫汽泡框，应用css，大家能够完成那样的实际效果。

以便完成上边的实际效果，大家最先要了解怎样制作三角形。

当我们们给一个DIV不一样色调的外框的情况下，大家能够获得下边的实际效果。

.triangle{
 border-top:20px solid red;
 width:50px;
 height:50px;
 border-right:20px solid blue; 
 border-bottom:20px solid gray; 
 border-left:20px solid green;
 }

能看到，四条外框变为了 梯形 的样子，而并不是大家认为的长正方形样子。

当我们们把小盒子的 总宽和高宽比变成0 的情况下，四条外框便会从这当中心触发发，变为4个三角形。

.triangle{
 border-top:20px solid red;
 width:0px;
 height:0px;
 border-right:20px solid blue; 
 border-bottom:20px solid gray; 
 border-left:20px solid green;
 }

那样，当我们们只必须一个三角形的情况下，要是把其他外框色调设成全透明色就行了。比如大家只保存朝上的三角形

.triangle{
 border-top:20px solid transparent;
 width:0px;
 height:0px;
 border-right:20px solid transparent; 
 border-bottom:20px solid gray; 
 border-left:20px solid transparent;
 }

了解了如何制作三角形，大家便可以运用伪类，用肯定精准定位的方法，制作一个汽泡框，比如

.container{
 position:relative;
 margin-top:50px;
 padding:6px 12px;
 color:#fff;
 font-size:16px;
 line-height:25px;
 width:200px;
 height:50px;
 background-color:orange;
 border-radius:4px; 
 p.container:after{
 position:absolute;
 top:-40px;
 right:20px;
 border-top:20px solid transparent;
 content:" "; // content 不必漏了，漏了会显示信息出不来来
 width:0px;
 height:0px;
 border-right:20px solid transparent; 
 border-bottom:20px solid orange; 
 border-left:20px solid transparent;


简易的汽泡框就制作好啦。三角形的样子，大伙儿能够依据具体的要求去拼凑。
之上便是文中的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多的适用诺心互联网。

      
      (责任编辑：admin)