使用::before和::after来完成尖角效果_html/css

使用::before和::after来完成尖角效果_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:36:21

原创

1652人浏览过

一、目标

目标完成下图效果：

二、完成

1、分析

在::before和::after伪元素的用法一文中有说到使用::befrore和::after可以完成一个六边形。这个案例是用一个#star-six完成一个正三角形，通过::after实现一个倒三角形，然后绝对定位放好位置。我们接下来也用这个思路完成。

2、完成

第一步，先完成如下基本的效果，实现一个在浏览器中居中的文本

代码如下：

升级有好礼

登录后复制

第二步，做左右两边尖尖的效果。可以根据做五角星的代码修改。

代码如下：

登录后复制

第三步，通过::before来实现第二步中的效果。

代码还是第二步中的代码，但是是通过::before来实现记得写上content:""。然后调整一下尺寸。

.title::before{  width: 0;  height: 0;  border-left: 40px solid transparent;  border-top: 20px solid red;  border-bottom: 20px solid red;  content: "";}

登录后复制

如果给border-left设置蓝色会发现效果如下。【原理还不是很懂，不知道这个高度是因为什么原因？？】

结果这是什么鬼？不是想要的效果。此时需要调整布局。

第四步，使用绝对定位调整布局。

.title设置relative，.title::before设置absolute。效果如下。

第五步，通过left调整。

.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;position:relative;padding:0 50px;}.title::before{  width: 0;  height: 0;  border-left: 40px solid transparent;  border-top: 20px solid red;  border-bottom: 20px solid red;  content: "";  position:absolute;  left:-40px;}

登录后复制

第六步，同理，通过::after实现右边效果。

.title::after{  width: 0;  height: 0;  border-right: 40px solid transparent;  border-top: 20px solid red;  border-bottom: 20px solid red;  content: "";  position:absolute;  right:-40px;}

登录后复制