壹 ❀ 引 这两天因为项目工作较少，闲下来去看了GitHub上关于面试题日更收录的文章，毕竟明年有新的打算。在CSS收录中有一题是 用css创建一个三角形，并简述原理 。当然对于我来说画一个三角形是没难度的，简述原理？我突然一愣，虽然我知道通过边框可以做到，那为什么这么设置边框可以实现呢，抱着 ...

很多时候我们用到三角形这个效果： 　　我们可以用CSS3实现这个效果，怎去做呢？先阐述一下原理，我们定义一个空的div，设置这个div宽高为0，给这个div加上一个100px边框（这里是方便观察），得到的是一个正方形，颜色和定义边框的颜色相同，我们看到正方形其实是这个div边框 ...

<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class ...

一个三角形 　　结果如下图所示： 将下边框的长度设置为0，实现一个最小空间的三角形 ...

方法一：border 先看看四边 border 颜色不同且不透明时的效果： 以上 rect1、rect3、rect4 个 div 的区别在于 width 和 height 的大小，而 rect2 的 4 边 border-width 值各不相同。 哈哈，三角形和梯形 ...

通过上一篇文章大家应该都知道border的本质了吧，不清楚的同学可以去看一下这篇博文 http://www.cnblogs.com/nini-huai/p/5917368.html 下来我们说一下怎么实现各种三角形吧，先来说一下我自己的思路 大家先看这张图片 看过上一篇文章的应该都不 ...

...

参考：http://www.webhek.com/css-triangles/ 使用上下左右的三角形箭头标志，直接用css即可完成，直接附上代码。 css: html： 效果图 ...