css before 箭头,伪元素before&after以及制作三角箭头

1.:before伪元素和:after伪元素是干嘛用的

它们会在内容元素的前后插入额外的元素，:before伪元素会在内容元素的前面添加一个额外元素，:after伪元素会在内容元素的后面添加一个额外的元素。如果我们想在这些额外生成的伪元素中添加内容的话，那么我们可以使用content属性给其指定某个值，常见的比如说当我们想要在某个:before或者:after伪元素中使用fontawesome图标的话，那么我们可以像下面这样做：

搜索

button.upsubmit:before{

content: "\f15a";

font-family: FontAwesome;

font-size: 16px;

color: #fff;

}

2.需要注意的地方

1.利用伪元素:before以及:after生成的元素盒子的父元素是利用伪元素这个属性的那个元素盒子。

2.由伪元素生成的内容并没有脱离文档流。

3.由伪元素生成的元素盒子它是行内元素，而对于行内元素来说，你懂的，width以及height属性并不能使用。width以及height只适用于块元素以及替换元素。

4.如果你不给由伪元素生成的元素盒子应用content属性的话，那么这个生成的元素盒子将没有尺寸，毕竟padding以及margin的默认值都是0。

5.定位参考点的问题，:before伪元素生成的元素盒子的定位参考点是利用伪元素这个属性的那个元素盒子；:after伪元素生成的元素盒子的定位参考点是:before伪元素生成的元素盒子。

6.在补充一下稍微搭边的注意点：如果某个inline元素的position属性的值是absolute或者fixed的话，那么这个inline元素会变成block元素；如果某个inline元素设置了float属性的话，那么这个inline元素会变成block元素。给元素设置了transform属性的话，那么会使得元素具有类似position:relative的效果。

3.利用伪元素创建十二边形

根据上面的学习我们便可以了解到伪元素的大致用法了，所以下面直接看源代码应该可以理解：

.center, .center:before, .center:after{

width: 100px;

height: 100px;

background-color: tomato;

}

.center{

position: relative;

margin-top: 200px;

margin-right: 200px;

}

.center:before{

content: "";

position: absolute;//此时inline变block

transform: rotate(-60deg);

}

.center:after{

content: "";

display: inline-block;//定位不改成绝对定位也行，因为现在定位参考点已经是.center了

transform:rotate(60deg);

}

效果图

4.利用border属性创建三角形

border属性在众多css属性里面并不算是一个难以理解的属性，但就是这么一个简单的属性也能够给网页带来某些绚丽的效果。下面可以直接看例子以及运行结果：

*{

box-sizing: content-box;

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

}

.show{

width: 100px;

height: 100px;

position: relative;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

border-top: 50px solid red;

border-right: 50px solid green;

border-bottom: 50px solid blue;

border-left: 50px solid yellow;

background-color: #233;

}

效果图

border交错的地方是被平分的，各自一半，所以便有了上面的效果。

那么问题来了，如果使元素盒子的content尺寸为0x0的话，然后在设置border的话会有什么效果呢？

*{

box-sizing: border-box;

}

html,body{

width: 100%;

height: 100%;

}

.show{

width: 100px;

height: 100px;

position: relative;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

border-top: 50px solid red;

border-right: 50px solid green;

border-bottom: 50px solid blue;

border-left: 50px solid yellow;

background-color: #233;

}

效果图

在上面的代码中我们将.show的元素盒子的box-sizing的属性设置为了border-box，所以当我们给元素设置width以及height的时候，它们涵盖了content-width，padding，border而我们的border-left加上border-right以及padding默认值为0(如果具有非0的padding值的话，那么盒子将会被撑开)，所以content-width就变为0x0了，这个时候所带来的效果就像上面那样。

这个时候距离三角形已经很近了，在上面的效果图每边的border就是被一个三角形，那么问题来了，我们如何使得只出现一个三角形呢，想当然是只给一边设置border属性，但是这样是不行的，因为必须得出现交错得border才可能出现平分区域得现象，不平分的话那么border会表现出矩形的效果。

但是也不是说我们必须得定义每边得border，当然每边都定义的话也错不了。举个例子：

例子图

比如我们想要制作像二号三角形的话，那么我们只需要定义border-top以及border-bottom。

既然不能只定义一边的border的话，那么我们该如何排除其他几边border的影响呢？答案就是对干扰的那几边使用透明色。。。下面可以看看效果：

*{

box-sizing: border-box;

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

}

.show{

width: 100px;

height: 100px;

position: relative;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

border-top: 50px solid transparent;

border-right: 50px solid green;

border-bottom: 50px solid transparent;

background-color: #233;

}

三角形

5.利用伪元素以及三角箭头制作漂亮的搜索框