CSS中border实现三角效果

最新推荐文章于 2021-03-22 15:08:45 发布

deng131

最新推荐文章于 2021-03-22 15:08:45 发布

阅读量96

点赞数

分类专栏： stylesheet 文章标签： CSS WordPress Blog HTML

本文链接：https://blog.csdn.net/deng131/article/details/83937350

版权

stylesheet 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一直关注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>

[img]http://image.zhangxinxu.com/image/blog/201003/2010-03-13_001825.png[/img]
[img]http://image.zhangxinxu.com/image/blog/201003/2010-03-13_005156.png[/img]
实现的原理很简单，之前各个技术博客上都有介绍，但是一直自己没有实践过，还是需要自己去实践，这个印象和理解起来才深刻。

参考：
[url]http://www.zhangxinxu.com/wordpress/?p=651[/url]
[url]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/[/url]

deng131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中border实现三角效果

一直关注js比较多，对css不是很熟，作为前端开发工程师而言这是不平衡和不合格的。当面试时或者时同行问道如何实现这个效果时候就萌到了，虽然也在各个博客上看到过实现文章但是一直没有自己去实践和理解其实现原理。[code="java"].clip{ border-style: solid dashed dashed; border-color: #red trans...
复制链接

扫一扫