请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
<div id=”demo”></div>
这是一道去年的百度笔试题。
涉及定位、三角形、伪元素。
下面是我的解答以及一些知识概述，都在程序里了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #demo{ width: 100px; height: 100px; background-color: #fff; border: 2px solid #000; position: relative; } #demo:before, #demo:after{ width: 0; height: 0; content: ""; position: absolute; border: solid transparent; left: 100%; } #demo:before{ /*border-left: 12px solid #000;*/ border-width: 12px; border-left-color: #000; top: 20px; } #demo:after{ /*border-left: 10px solid #fff;*/ border-width: 10px; border-left-color: #fff; top: 22px; } /*三角形*/ #sanjiao{ width: 0; height: 0; border: 50px solid transparent; border-left-color: red; } </style> </head> <body> <div id="demo"></div> <p>伪元素选择器： :first-line, :first-letter :before, :after。<br/> :before表示在元素之前添加一个元素，:after表示在元素之后添加一个元素。<br/><br/> CSS中绘制三角形：容器宽高设为0，然后三角形的高就是border-width, 所以让border: 50px solid transparent，再把想要的三角对应的方向设成想要的颜色就好了，如border-left-color: red。 </p> <div id="sanjiao"></div> </body> </html>