配合after、before伪元素，可以将上述效果与DOM元素结合，用极简有DOM元素（不用增加新的元素）实现原来较复杂、或无法实现的效果，如气泡文字、方块修饰、下划线等。
附：文中用到的CSS代码。阅读时请注意，本文未充分考虑浏览器兼容问题。
<style type="text/css">
.dialog{
width:200px;
border:1px solid gray;
border-radius:8px;
font-size:18px;
line-height:32px;
position:relative;
padding-left:10px;
}
.dialog:before{
content:"";
display:block;
position:absolute;
width:12px;
height:12px;
border:1px solid gray;
border-width:1px 0 0 1px;
left:-7px;
top:10px;
background-color:white;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
div.border-example1{
width:0;
height:0;
border-style:solid;
border-width:24px;
border-color:red blue;
}
div.border-example2{
width:0;
height:0;
border-style:solid;
border-width:24px 24px 24px 0;
border-color:white gray;
}
div.border-example3{
width:24px;
height:24px;
background-color:red;
}
div.border-example4{
width:24px;
height:24px;
background-color:red;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
div.border-example5{
width:24px;
height:24px;
border-style:solid;
border-width:1px 0 0 1px;
border-color:red;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
div.border-example6{
width:24px;
height:24px;
border-radius:12px;
background-color:red;
}
.rect{
line-height:36px;
height:36px;
background-color:gray;
padding:0 20px;
position:relative;
}
.rect:before{
content:"";
position:absolute;
width:12px;
height:12px;
top:12px;
background-color:blue;
left:4px;
}
.hr{
position:relative;
}
.hr:after{
content:"";
position:absolute;
width:auto;
left:0;
right:0;
bottom:0;
height:1px;
background-color:red;
}
</style>