摘要：
--向上三角形--˃页面效果：注意：上述在线重印效果，结合实际写作方法，相对简单。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description"content=""> <meta name="author"content=""> <link rel="stylesheet"href="css/style.css"> <style> /*向上*/.triangle_border_up{width:0;height:0;border-width:0 30px 30px;border-style:solid;border-color:transparent transparent #333;/*透明 透明 灰*/margin:40px auto;position:relative; }.triangle_border_up span{display:block;width:0;height:0;border-width:0 28px 28px;border-style:solid;border-color:transparent transparent #fc0;/*透明 透明 黄*/position:absolute;top:1px;left:-28px; } /*向下*/.triangle_border_down{width:0;height:0;border-width:30px 30px 0;border-style:solid;border-color:#333 transparent transparent;/*灰 透明 透明 */margin:40px auto;position:relative; }.triangle_border_down span{display:block;width:0;height:0;border-width:28px 28px 0;border-style:solid;border-color:#fc0 transparent transparent;/*黄 透明 透明 */position:absolute;top:-29px;left:-28px; } /*向左*/.triangle_border_left{width:0;height:0;border-width:30px 30px 30px 0;border-style:solid;border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */margin:40px auto;position:relative; }.triangle_border_left span{display:block;width:0;height:0;border-width:28px 28px 28px 0;border-style:solid;border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */position:absolute;top:-28px;left:1px; } /*向右*/.triangle_border_right{width:0;height:0;border-width:30px 0 30px 30px;border-style:solid;border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/margin:40px auto;position:relative; }.triangle_border_right span{display:block;width:0;height:0;border-width:28px 0 28px 28px;border-style:solid;border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/position:absolute;top:-28px;left:-29px; } </style> </head> <body> <!--向上的三角形 --> <div class="triangle_border_up"> <span></span> </div> <!--向下的三角形 --> <div class="triangle_border_down"> <span></span> </div> <!--向左的三角形 --> <div class="triangle_border_left"> <span></span> </div> <!--向右的三角形 --> <div class="triangle_border_right"> <span></span> </div> </body> </html>
页面效果图：
注：以上网上转载的效果，然后还是结合实际中用到的写法，偶觉得比较简洁的方法。
利用两个伪元素:before与:after为类名为.box_in_answer的元素添加小三角形：
.box_in_answer:before里的display:block很重要，一定要加；.box_in_answer的父元素也一定要加:position:relative。.box_in_answer:before{content:" ";display:block;width:0;height:0;border-width:0 10px 10px;border-style:solid;border-color:transparent transparent #c4c4c4;position:relative;margin-top:-15px} .box_in_answer:after{content:" ";display:block;width:0;height:0;border-width:0 9px 9px;border-style:solid;border-color:transparent transparent #f9f9f9;position:absolute;top:32px;left:7px;} .box_in_answer{border:1px solid #c4c4c4;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;color:#346ab4;font-size:14px;line-height:30px;padding:5px}
页面效果：
