CSS中border兑现三角效果
日期：2014-05-17 浏览次数：20561 次
CSS中border实现三角效果
一直关注js比较多，对css不是很熟，作为前端开发工程师而言这是不平衡和不合格的。当面试时或者时同行问道如何实现这个效果时候就萌到了，虽然也在各个博客上看到过实现文章但是一直没有自己去实践和理解其实现原理。
实现的原理很简单，之前各个技术博客上都有介绍，但是一直自己没有实践过，还是需要自己去实践，这个印象和理解起来才深刻。
参考：
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/
一直关注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/
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
