同学们，当美工给的设计图是这样：

或者这样：

我的内心其实是拒绝的-_-；但工作还得干，大部分同学会写

.icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)}

或者干脆利落

.icon img{...}

添加会计

这样做是可以解决问题的，但是为了这个一个小小的小尖尖，我们还要大费周章的去切(很少同学能享受到美工给制作的sprite图片)，如果遇到的设计图不是分层的或者设计软件都不熟的话是很郁闷的...

其实有一种简单的方法可以搞定这种小尖尖，大家请看：

.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; }

这就涉及到border的问题，如果一个元素的宽度设为0，border-width却为大于0的数，结果是会出现一个正方形(每个边会成为一个等边直角三角形)，如果设置border-color为上右下左不同的四种颜色，结果就会出现一个由四个等边三角形构成的正方形！

.test{width:0;border:50px solid ;border-color: #333 #ff0000 #ccecec #999}

这样大家不难想到，如果把某三个边的颜色设为透明，我们就能得到一个任意颜色的三角形了。

.test{width:0;border:50px solid ;border-color: transparent transparent #ccecec transparent}

然后我们将这个元素，例如标签，设置定位为相对定位，调整其top和left的值，即可轻易得到一个用css写的小尖尖。

至于

这个有边框的尖尖，我给大家说一下思路：在上面实现的三角中放入一个类似的元素，我们称之为子三角，父三角的border-color设置为下面div的边框颜色，子三角的border-color设置为div的背景颜色，子三角定位(注意调整子三角位置，使其恰好露出父三角1px的边)，然后调整父三角的位置，OK大功告成！

如果知道的兄台就当是看个戏，不是很熟练的同学可以自己多练练。希望多多批评指正！

【前端切图】用css画一个卡通形象-小猪佩奇

最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

用纯css写一个常见的小三角形

.test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

纯CSS写三角形-border法

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

Directx11学习笔记【十一】 画一个简单的三角形--effect框架的使用

这里不再介绍effect框架的具体使用,有关effect框架使用可参考http://www.cnblogs.com/zhangbaochong/p/5475961.html 实现的功能依然是画一个简单 ...

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

Directx11教程(6) 画一个简单的三角形(2)

原文:Directx11教程(6) 画一个简单的三角形(2)      在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变, ...

Directx11教程(5) 画一个简单的三角形(1)

原文:Directx11教程(5) 画一个简单的三角形(1)       在本篇教程中,我们将通过D3D11画一个简单的三角形.在D3D11中,GPU的渲染主要通过shader来操作(当然还有一些操作 ...

纯 CSS 创建一个三角形

[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

随机推荐

[LeetCode] Non-overlapping Intervals 非重叠区间

Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

ASP.NET Core开发-Docker部署运行

ASP.NET Core开发Docker部署,.NET Core支持Docker 部署运行.我们将ASP.NET Core 部署在Docker 上运行. 大家可能都见识过Docker ,今天我们就详细 ...

iPad Pro分辨率

iPad Pro分辨率  为 2732 x 2048

js运动框架tween

myAnimate