以下几句话：
在阅读本文之前，您可能认为边框只是一个简单的边框。 看完这篇文章，相信你也会和我说一样的话，“妈的，原来css里的边框还能这么玩”。 这篇文章主要是在很久之前看别人用纯CSS画三角形后，整理出自己的一些想法。 文章将介绍几个小图标的疗效。
使用css中的边框勾勒出蛋黄的形状：
是的，你没有看错，这里就是概述一种类似于猪肉的疗效。
思路：我们先用div画一个正圆，然后设置border-radius: 50%;，这样就可以得到矩形的效果了css三角形，代码如下：
html代码：
CSS代码：
.div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: aqua;
text-align: center;
border-radius: 50%;
}
结果如图所示：
思考：分析猪肉的结构，猪肉有点椭圆形，又分大头和小头。 我们有什么办法可以把之前的圆变成椭圆吗？
思路：我们改变div的长度或者高度，让它们不一致，看看能否得到我们想要的疗效。
实现：我们改变width:50px; 或高度：50px； （只改变其中一项），则得到如下疗效：
思考：我们已经获得了椭圆的疗效，如何才能达到大头和小头的疗效呢？
思路一：我们将椭圆进行分割，然后控制长度不一致。 （此方法不成功）
想法2：我们设置border-radius的百分比。 当border-radius：100%时； 以及之前方法的截图如下：
再尝试将border-radiusratio的值分开（不要缩写，直接写4），然后控制比例不一致。 关键代码：
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
此时得到的疗效截图：
使用css中的边框绘制三角形：
相信大家都知道border-color控制边框的颜色，而你可能没有尝试过这个，看下面的代码：
html:
CSS：
.div {
width: 100px;
height: 100px;
border: 50px solid transparent;
border-color: yellow green red aqua;
}
结果是：
思考一：如果div没有宽高怎么办？
实现结果：
思考2：上面的处理结果是四个三角形。 我们有什么办法可以将三角形与哪个div分开呢？
思路：没接触过div的分离（不应该存在），看看CSS“层叠样式”的定义，改变一下思路。 我们有什么办法可以遮盖我们不想要的三角形吗？ 失去？
具体方法：这里设置我们需要的颜色作为我们的背景色——白色，是的，这样就可以得到我们想要的效果了。 代码如下（以上面的三角形为例）：
边框颜色：黄色白色白色白色白色；
是不是这样就算我们完成了我们的三角疗效呢？
我们可以尝试将整个body的背景色改为红色，看看有什么变化：
发现div还占这么大的空间，而且背景色设置为红色，这不是最科学的
思考4：怎样才能让不需要的颜色消失呢？
思路：我们将不想显示的颜色设置为父容器的背景色，border-color:yellowtransparenttransparenttransparent；
结果如下：
思考三：如何设置div不占用这么大的空间？
思路：直接去掉想要的三角形对边的边框长度
具体方法：（这次以下面的三角形为例），代码如下：
div {
宽度：0 像素；
高度：0 像素；
边框底部：50pxsolidred；
左边框：50pxsolid透明；
右边框：50pxsolid透明；
结果如图所示：
关于三角形展开的一些想法：
思考一：我们常用的三角形有锐角三角形、钝角三角形、直角三角形、等腰三角形、等边三角形等，我们有什么方法可以直接得到我们想要的三角形效果呢？
思路：当斜边与水平线平行时，我们直接控制长宽比，即可达到想要的三角形效果； 当与水平线不重合时，这个时候就比较复杂了，我们需要利用宽高比和CSS3的transform属性和rotate相结合，让我们的三角形展现出我们想要的效果（这里只是介绍一下）的思路，不是具体实现，这涉及到物理知识，大家可以自行百度）。
思考2：我们可以用多个三角形拼出更多的形状吗？
（这可以是，比如我们可以用两个三角形和一个长圆组成一个平行四边形css三角形，甚至可以说我们可以用多个div组成一个简单的竹屋……）
补充：
1.在我们的思考一后面的图中，我们可以看到，虽然中间是矩形，但是我们用同样的方法也可以得到矩形的效果（具体方法不再单独介绍）。
2.通过旋转，我们可以让我们的正圆变成长方形的效果
六边形的制作（以多边形为例）
首先我们来分析一下多边形，看看能否将其分解为我们上面提到的简单图形。 见下图：
分析：以内部为例，我们可以看到多边形是由两个三角形和一个正方形组成的。
思考1：我们有什么办法把这三个图形放在一起吗？
思路：使用伪元素：after和:before，然后在各自的区域绘制图形
参考代码如下：
六边形的制作
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 100px auto;
}
#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid yellow;
}
#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid aqua;
}
（其实这里的知识介绍了一种情况，也可以尝试三角形的不同边）
多角星的制作（以六角星为例）
分析：尝试用上述方法分析六角星的结构。 我们可以理解，六角星是由两个三角形重叠而成。 连接起来很容易。 我们直接看代码：
六角星
div {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #de34f7;
margin: 10px auto;
}
div:after {
content: "";
/*content插入内容*/
width: 0;
height: 0;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid #de34f7;
margin: 60px 0 0 -100px;
}
最终效果如下：
五角星的制作（实际操作比六角星难一些）：我们先自己画一个五角星，然后把它分成三份，然后用上面的步骤来实现。 这里我只列出一种方法作为参考（有几个细节处理起来有点复杂），分析图如下：
参考代码如下：
CSS小图标的效果：
到目前为止，你还没看过吗？接下来分享一下我制作的CSS小图标：对话框的制作
对话框的制作：
分析：对话框由三角形和圆角组成
实现：代码如下：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
实现结果：
下一句话：
事实上，这个疗效看起来并没有那么酷，我记得我第一次得知这个的时候是多么兴奋。 当时做了比较多的疗效（不过前几天笔记本换系统的时候这些东西就没有了），所以表现出来的只是一个很简单的疗效。 现在能回忆起来的就这么多了，等想起来了再补充。 你们有什么好的疗效呢？ 欢迎分享和交流。
很多知名网站都会在文字链接右侧添加箭头图标，比如Google站长管理后台、Alexa官网等，这样设计的好处是让链接更加显眼，更容易区分。
在文本链右侧添加箭头图标的方法大多数人都是使用css背景图片来实现的，包括前面提到的Google站长管理后台、Alexa官网等。是的，这些技术是最容易掌握和应用的。 这正是本文将要实现的方式。
我们先来看看治疗图。
在css背景图片的文本链一侧添加箭头图标
上图展示了两种超链接样式，分别是两个不同的箭头图标。 虽然它们是背景图片，但是我们可以通过css手动在文本链接的右侧添加这样的背景图片。
CSS代码如下：
。内容{
宽度：600px；
边距：30px30px30px30px；
字体系列：“MicrosoftYahei”、Georgia、“TimesNewRoman”、Times、serif；
字体大小：14px；
颜色：#333；
行高：185%；
.内容a{
背景：url（数据：图像/ png;base64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzY aB/IkeGOrxXhqB+uA9 Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAAASUVORK5CYII=)centerright无重复；
右内边距：13px；
左边距：3px；
右边距：3px；
文本装饰：下划线；
颜色：#c30；
.contenta:悬停{
颜色: 蓝色;
这里的关键代码是background:url，其中url是图片地址。 在上面的css代码中，url使用了箭头图标的base64字符串（指南：使用浏览器轻松获取图像的base64字符串）。
以下是html关键代码：
超链接样式一
HTML，特别容易实现下拉菜单的效果。 而且由于只能修改宽度，无法修改高度、颜色等样式，所以有时候在网页设计中配合整体布局变得不美观。 因此，它被网页设计师广泛使用。 通过div+css箭头css，可以达到你想要的样式的效果，使得下拉菜单和网页的整体布局更加美观、和谐。
从上面的html代码中可以看到，虽然我们不需要编写任何额外的代码，但是普通的超链接就足够了。 这样做的好处是我们可以随时改变css代码来设置不同样式的超链接。 是否需要右箭头图标也可以在css中轻松完成。
完整的html代码如下：
超链接样式一
HTML，特别容易实现下拉菜单的效果。 而且由于只能修改宽度箭头css，无法修改高度、颜色等样式，所以有时候在网页设计中配合整体布局变得不美观。 因此，它被网页设计师广泛使用。 通过div+css，可以达到你想要的样式的效果，使得下拉菜单和网页的整体布局更加美观、和谐。
执行代码 获取代码
