`
deng131
  • 浏览: 662229 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS中border实现三角效果

CSSWordPressBlogHTML 
阅读更多
一直关注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/
分享到：
| 处理不支持JavaScript脚本情况
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics