较实用的图形CSS写法

1、对话框

  #talkbubble {
     width: 120px; 
     height: 80px; 
     background: #404040;
     position: relative;
     -moz-border-radius:    10px; 
     -webkit-border-radius: 10px; 
     border-radius:         10px;
  }
  #talkbubble:before {
     content:"";
     position: absolute;
     right: 100%;
     top: 26px;
     width: 0;
     height: 0;
     border-top: 13px solid transparent;
     border-right: 26px solid #404040;
     border-bottom: 13px solid transparent;
  }
  #talkbubble:after {
     content:"";
     position: absolute;
     bottom: 100%;
     left: 40%;
     width: 0;
     height: 0;
     border-left: 13px solid transparent;
     border-right: 13px solid transparent;
     border-bottom: 26px solid  #404040;
  }

箭头朝哪个方向、该方向不设置border属性，相反方向border设置具体颜色，两边border颜色transparent,通过调整边框大小实现三角形角度变化。

2、直角三角形

#triangle {
   width: 0;
   height: 0;
   border-bottom: 100px solid #404040; 
   border-right: 100px solid transparent;
}