用css写三角

题目：

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

思路，

1)两个元素a,b:width与heigh设为0 left设为100%（这样要求父元素demo的position：relative,而ab的position:absolute）

2)border设为transparent，然后border-left下面的元素设为#000黑色，上面的元素设为#fff白色（下面的元素border比上面的大2px）

具体代码：

html:

<div id="demo"></div>

css:

#demo{
  width:100px;
  height:100px;
  background-color:#fff;
  border:2px solid #000;
  position:relative;
}
#demo:after,#demo:before{
  position:absolute;
  width:0;
  height:0;
  left:100%;
  border:solid transparent;
  content:"";
}
#demo:after{
  top:20px;
  border-width:10px;
  border-left-color:#fff;
}
#demo:before{
  top:18px;
  border-width:12px;
  border-left-color:#000;
}