较实用的图形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;}