三角的写法

.container{margin:50px auto; width: 800px; text-align: center;background: #ccc;}   //最外层大的div
.con-arrow{position: relative;   //内部框div
background: #88b7d5;
padding: 40px;
width: 280px;
height: 100px;
border-radius: 10px;} 
.con-arrow:after{   //写的三角
position: absolute;
right: 100%;
top:50%;
margin-top: -15px;
content: '';
border:30px solid;   

border-color:transparent #88b7d5 transparent transparent ;   

//  .box{background:#cc0066; width: 400px; height: 200px; } 写的单独一边显示的三角
.test{border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;}

}

//html代码：

<div class="container">
<div class="con-arrow">asdf</div>
</div>