Writing triangles with CSS

Topic:

Please use CSS to implement the style as shown in the relevant dimensions, where the DOM structure is:
<div id= "Demo" ></div> ideas, 1) Two elements a,b:width with Heigh set to 0 left set to 100% (this requires the parent element of the demo position:relative, and AB Position:absolute) 2) border is set to transparent, then border-left the following element is set to #000 black, the above element is set to # FFF White (The following element border 2px larger than the above) specific code: HTML:

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

Writing triangles with CSS