CSS中border兑现三角效果 _HTML/CSS

CSS中border实现三角效果
一直关注js比较多，对css不是很熟，作为前端开发工程师而言这是不平衡和不合格的。当面试时或者时同行问道如何实现这个效果时候就萌到了，虽然也在各个博客上看到过实现文章但是一直没有自己去实践和理解其实现原理。

<!DOCTYPE html>
<html>
<head>
<style>
.clip{
  border-style: solid dashed dashed;
  border-color: #red transparent transparent;
  border-width: 6px;
  width:0;
  height:0;
}
</style>
</head>
<body>
<div>
   <div class="clip"></div>
</div>
</body>
</html>

实现的原理很简单，之前各个技术博客上都有介绍，但是一直自己没有实践过，还是需要自己去实践，这个印象和理解起来才深刻。

参考：
http://www.zhangxinxu.com/wordpress/?p=651
http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/