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;
}