来看下面的代码： html： div class=div/div css： .div {width: 100px;height: 100px;border: 50px solid transparent;border-color: yellow green red aqua;} 这样的功效为： 思考一：假如该div没有宽高会奈何？ 实现功效： 思考二：前面的结果获得的是四个三角形，border-color: yellow transparent transparent transparent; 功效如下： 思考三：我们如何将div配置不占那么大的空间呢？ 思路：直接将想要的三角形的对边的border的宽度去掉 详细做法：（这次以想要下面的三角形为例），也可以实验三角形地址的边纷歧样） 多角星的建造（以六角星为例） 阐明：试着用前面的要领，等腰三角形等。

阐明图如下： 参考代码如下： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle type=text/css#star{width: 0px;height: 0px;margin: 50px 0;color: red;position: relative;display: block;border-bottom: 70px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;-webkit-transform: rotate(35deg);}#star:before{content: ;width: 0px;height: 0px;margin: 50px 0;color: yellow;position: relative;display: block;border-bottom: 80px solid yellow;border-left: 30px solid transparent;border-right: 30px solid transparent;-webkit-transform: rotate(-35deg);top: -45px;left: -65px;}#star:after{content: ;width: 0;height: 0;position: absolute;display: block;top: 3px;left: -105px;color: #fc2e5a;border-right: 100px solid transparent;border-bottom: 70px solid #fc2e5a;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);}/style/headbodydiv id=star/div/body/html CSS小图标结果： 到这里，鸡蛋有点椭， 思路：我们先用div绘制一个正方形，我们可以看出六边形由两个三角形和一个矩形组成，转换我们的思维，（此种要领不乐成） 思路二：我们配置border-radius的百分比，代码如下（以想要上边的三角形为例）： border-color: yellow white white white; 是不是这样就算完成我们的三角形结果了呢？ 我们可以试试修改整个body的配景颜色为玄色，可是我们来扣一扣CSS的界说层叠样式，/pdiv id=comment_bubble/div/body/html 实现功效： 后头的话： 固然这些结果看上去并不是那么的酷，我们可以将我们的正方形酿成菱形的结果 多边形的建造（以六边形为例） 首先我们阐明一下六边形，我们有没有什么要领将我们不想要的三角形包围掉？ 详细做法：将我们需要的何处的颜色配置为我们的配景致--白色，不去详细实现。

要害代码： border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; 此时获得的结果截图： 用css中的border画三角形： 相信各人都知道border-color是节制边框颜色的，我们有什么步伐让我们直接获得的就是我们想要的三角形结果不？ 思路：当底边和程度线平行时。

我们直接通过节制宽高比来实现我们想要的三角形结果；当与程度线不重适时这个时候就较量巨大了，可是你大概没这样试过，我们阐明六角星的布局，钝角三角形，接下来就好办了，我们可以获得梯形的结果（详细做法不再别的先容）。

看能不能把它解析成我们前面有说过的简朴的图形，好比说我们可以用两个三角形和一个长方形拼成平行四边形，让它们纷歧致，所以展示的也只是很简朴的结果，可是记得本身刚开始学到这个的时候好欢快好感动的说， 2、通过旋转，其时做了更多的结果（可是前几天电脑换系统以前的那些都没了）。

看能不能获得我们想要的结果，等边三角形，文中会先容几种小图标的结果，这里是要做绘制一个雷同于鸡蛋的结果，可是它分大头和小头，我们可以看到其实那中间的几个体离是梯形，我们有没有什么步伐将三角形从谁人div中疏散出来呢？ 思路：今朝没有打仗过有关div疏散的（详细也应该不存在吧）。

个中有涉及到数学方面的常识可以本身百度）， 思考二：我们能不能用多个三角形在一起拼出更多的形状？ （这个可以有，这样我们就可以获得一个圆形的结果，直接写成4个），代码如下： html代码： div class=div/div css代码： .div {width: 100px;height: 100px;line-height: 100px;background-color: aqua;text-align: center;border-radius: 50%;} 功效如图： 思考：阐明鸡蛋型布局，我们有没有什么步伐先让之前的圆变为椭圆呢？ 思路：我们改变div的宽度或高度，我相信你也会跟我一样说一句我靠。

后头想到了会连续增补，当border-radius: 100%;与前一种要领的截图如下： 再次实验将border-radius的百分比的值举办疏散（不要简写， ，然后在需要的处所安排一个三角形，我们可以领略为一个六角星是由两个三角形一起重叠而成的，这篇文章主要是很早以前看了别人用纯CSS绘制三角形后本身的一些思路的整理。

我们直接看代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title六角星/titlestyle type=text/cssdiv {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;}/style/headbodydiv/div/body/html 最终实现结果如图： 五角星的建造（实际操纵起来比六角星坚苦）：我们先本身画一个五角星，各人有什么好的结果接待在下面分享，甚至说我们用多个div在一起拼成简朴的小木屋结果） 增补： 1、在我们思考一的前面那张图，代码如下： div{ width:0px; height: 0px; border-bottom: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } 功效如图： 关于三角形的扩展的一些思考： 思考一：我们平时的三角形有锐角三角形，用同样的要领，让我们的三角形泛起出我们想要的结果（这里只是先容思路，然后操作前面的步调去实现。

直角三角形。

就需要用到宽高比和CSS3中的transform属性和rotate相团结，接下来我们如何实现大头和小头的结果呢？ 思路一：我们再把椭圆举办支解然后节制宽度纷歧致，然后节制百分比纷歧致，这时我们获得的结果别离为： 思考：我们已经获得椭圆结果了， 思考一：我们有没有什么要领将这三个图形拼在一起？ 思路：用伪元素：after和:before，本来css中的border还可以这样玩，看有什么变革： 发明该div仍占据着那么大的空间，下面看图： 阐明：以上面的为例，然后在各自的区域绘制图形 参考代码如下： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title六边形的建造/titlestyle type=text/css#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;}/style/headbodydiv id=hexagon/div/body/html （虽然这里常识先容了一种环境，对的这样就可以获得我们想要的结果。

本来css中的border还可以这样玩 前面的话： 在看这篇文章之前你大概会以为border只是简朴的绘制边框，你是不是还没看过瘾呢？下面在来分享一下本身做的CSS小图标：对话框的建造 对话框的建造： 阐明：对话框由一个三角形和一个圆角进行构成 实现：代码如下： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle type=text/css* {margin: 0px;padding: 0px;}div {margin: 100px;}#comment_bubble {width: 300px;height: 100px;background: #088cb7;position: relative;-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;}#comment_bubble:before {content: ;width: 0;height: 0;right: 100%;top: 38px;position: absolute;border-top: 13px solid transparent;border-right: 26px solid #088cb7;border-bottom: 13px solid transparent;}/style/headbodyp动静提示框可以先建造一个圆角矩形，这里我只是列出一种要领作为参考（个中有几个细节的处理惩罚有点巨大），而且配景颜色配置为白色并不是最科学 思考四：我们该如何将不想要的颜色配置为消失呢？ 思路：我们将不想要表示出来的颜色配置为父级容器的配景致， 实现：我们别离改变width:50px;或height:50px;（只改变个中的一个），此刻还能回想起来的就这么多，然后将其支解为三个，看了这篇文章， 用css中的border绘制鸡蛋形状： 是的你没看错，然后操作配置border-radius: 50%;，。