同学们，当美工给的设计图是这样：
或者这样：
我的内心其实是拒绝的-_-；但工作还得干，大部分同学会写
立即学习“前端免费学习笔记（深入）”；
<style>.icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)}</style><div class="con"> <div class="icon"></div> <span>添加会计</span></div>或者干脆利落
<style>.icon img{...}</style><div class="con"> <div class="icon"><img src="..." alt="还在为小三角形切图？使用纯CSS写一个简单的三角形_html/css_WEB-ITnose" ></div> <span>添加会计</span></div>这样做是可以解决问题的，但是为了这个一个小小的小尖尖，我们还要大费周章的去切（很少同学能享受到美工给制作的sprite图片），如果遇到的设计图不是分层的或者设计软件都不熟的话是很郁闷的...
其实有一种简单的方法可以搞定这种小尖尖，大家请看：
<style>.con2{height: 50px;line-height: 50px;text-align: center;background:#ccecec;position: relative;}.con2 i{border: 10px solid #ccecec; border-color: transparent transparent #ccecec transparent;position: absolute; top: -20px;left: 139px; }</style><div class="con"> <i></i> <span>添加会计</span></div>这就涉及到border的问题，如果一个元素的宽度设为0，border-width却为大于0的数，结果是会出现一个正方形（每个边会成为一个等边直角三角形），如果设置border-color为上右下左不同的四种颜色，结果就会出现一个由四个等边三角形构成的正方形！
<style>.test{width:0;border:50px solid ;border-color: #333 #ff0000 #ccecec #999}</style><div class="test"></div>这样大家不难想到，如果把某三个边的颜色设为透明，我们就能得到一个任意颜色的三角形了。
<style>.test{width:0;border:50px solid ;border-color: transparent transparent #ccecec transparent}</style><div class="test"></div>然后我们将这个元素，例如标签，设置定位为相对定位，调整其top和left的值，即可轻易得到一个用css写的小尖尖。
至于这个有边框的尖尖，我给大家说一下思路：在上面实现的三角中放入一个类似的元素，我们称之为子三角，父三角的border-color设置为下面div的边框颜色，子三角的border-color设置为div的背景颜色，子三角定位（注意调整子三角位置，使其恰好露出父三角1px的边），然后调整父三角的位置，OK大功告成！
如果知道的兄台就当是看个戏，不是很熟练的同学可以自己多练练。希望多多批评指正！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
589
收藏
