css 实现一个带尖角的正方形

前些天在ife上看到了一个例题，题目如下：

<div id=”demo”></div>

刚看到这个题目觉得无从下手，感觉一般这种不都是一个背景图片吗，怎么还能用css写的?? 后来看到网友的答案，试着运行了一下发现真的和图上的一模一样，最伤心的是看到答案竟然还看不懂。。觉得自己还是好水，仔细琢磨了一下，现将心得整理一下：

实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border

1、before 和 after 都是css中的伪元素，他们俩用法都差不多，通过给定一个属性content给元素添加新的内容，不同的是before用来在元素前插入新内容，after用来在元素后面插入新内容。

比如有一个p元素：水

<p>水</p>

如果给这个p元素设置一个before：

p:before{
content:"上海自来";
}

这个p就变成了：上海自来水，content属性的值就添加到了p元素内容的前面。

相反的，如果是用after：

p:after{
content:"来自海上";
}

这个p就会变成：水来自海上。

简单的before、after使用就是这样，一开始看的时候觉得好简单，不就是插入个内容吗，但实际上插内容不算什么，最重要的是它能设！置！样！式！一旦给它设置各种各样的样式之后这个伪元素就厉害了，比如题目中的尖角，题目只给了一个div我们，但是很明显div只能弄出一个左边的带边框正方形，右边的尖角怎么来的呢，那就可以靠这个伪元素了。

思路很简单，先把正方形画出来，然后通过before或者after变出一个尖角出来，放到正方形右上角去。div如下：

#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}

好，这个时候正方形已经出来了，但是三角形怎么画出来呢，这就要用到border了

2、以前使用border都是border：1px #000 solid，顶多换换颜色和边框值，没想到画三角形也能靠它……

以前没发现的原因在于使用border的时候总是1px、2px的，太细了，当把边框变成20px的时候就有意思了，下面是一个边长10px的正方形设置其边框长也为10px：

我们知道可以通过设置border-left等等手动设置四个边框为不同颜色，分别设置之后：

马上看出靠谱，如果把这个div的宽度减小到0之后岂不就是四个三角形了，动手实验：

果然是，那把上下右的颜色变透明之后就能得到一个三角形拉，在这里要注意的是把其他三个边透明是能得到一个三角形的，但是如果只设置左边框而不设置其他三个边框是得不到的，自己动手试下便知，因为如果只设置左边框，而这个div的高度又为0，那这个左边框是不会向上下两端扩展的，只有当上或下也有边框时才会呈现出一个三角形，所以我们可以把所有边框透明掉，然后把左边框显示即可。比如下面这样：

diiv{
width:0px;
height:0px;
border: 20px transparent solid;
border-left-color: #000;
}

      就能得到这个效果了：

那把三角形放到正方形右侧就很简单了，有一点是那个正方形是缺了一段的，我们可以让三角形颜色为白色覆盖掉正方形的边框，另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面，这样就只漏出了三角形的两条边，所以这里同时用到了before和after。

因为before和after插入的三角形是放在指定的位置的，所以它们的position都设置为绝对定位，那么div就要设置成相对定位了：

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}

首先是黑色的三角形：

#demo:after{
width:0px;
height:0px;
border: 10px transparent solid;
border-left-color: #000;
position:absolute;
top:20px;
left:100%;
content:""
}

注意content虽然没有值，但是必须得加上。现在效果如下：

然后是比黑色三角形小一点点的白色三角形：

#demo:after{
width:0px;
height:0px;
border: 8px transparent solid;
border-left-color: #fff;
position:absolute;
top:22px;
left:100%;
content:""
}

注意白色三角形比褐色三角形要小，所以边框长度就小2px，且top也大2px，效果如下：

由此这个题目就做完拉，当然相同的样式可以整理下，最终样式如下：

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
border-width:8px;
border-left-color: #fff;
top:22px;
}

博主也在学习css当中，文章难免有不足之处，还望大家指正！

以上就介绍了css 实现一个带尖角的正方形，包括了方面的内容，希望对HTML教程有兴趣的朋友有所帮助。