0
0
Y2J
发布时间：2017-05-23 10:46:16
|4378人浏览过
|来源于php中文网
原创
经常看到这样的尖角，以前不懂，以为都是用图片做出来的，后来惊奇的发现，原来很多都是用css做出来的，既美观又节省资源，真是两全其美啊！
那么，用CSS怎么实现这种效果呢？首先，来写一个简单的代码：
代码如下:
这儿，我们可以得到一个黑色的正方形，其实这是边框组成的，因为p的宽度和高度都是0,。那么，我们具体来看看，p宽度和高度都是0时，它的上下左右四边框都是怎样的，下面我们把边框的各边颜色分别设置为不同颜色：
立即学习“前端免费学习笔记（深入）”；
代码如下:
我们发现，原来当p的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做可爱的小尖角了。我们只要把不需要的三边的边框（三角形）的颜色设置为与背景相同即可，这样就只能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。具体代码如下所示：
代码如下:
大功告成，效果如下图：
【相关推荐】
1. CSS3免费视频教程
相关文章
css透明黑色背景怎么写最合适_使用rgba定义半透明黑色
css卡片内容过长撑坏布局怎么办_通过text-overflow与line-clamp限制文本行数
css过渡效果和transform结合错位怎么办_设置transition transform保证协调
css渐变颜色出现明显断层怎么办_利用linear-gradient设置平滑过渡改善断层
css grid布局实现卡片等间距排列怎么办_结合gap和justify content
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
