一、目标

目标完成下图效果：

二、完成

1、分析

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

2、完成

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

代码如下：

<style>

.middle{

text-align:center;

}

.title{

background-color:black;

color:#f3e14f;

display:inline-block;

font-size:18px;

height:40px;

line-height:40px;

padding:0 50px;

}

</style>

<div class="middle">

<h5 class="title">升级有好礼</h5>

</div>

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

代码如下：

<style>

#star-three {

  width: 0;

  height: 0;

  border-left: 100px solid transparent;

  border-top: 50px solid red;

  border-bottom: 50px solid red;

/*  position: relative;*/

}

</style>

<div id="star-three"></div>

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

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

.title::before{

  width:;

  height:;

  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:;

  height:;

  border-left: 40px solid transparent;

  border-top: 20px solid red;

  border-bottom: 20px solid red;

  content: "";

  position:absolute;

  left:-40px;

}

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

.title::after{

  width:;

  height:;

  border-right: 40px solid transparent;

  border-top: 20px solid red;

  border-bottom: 20px solid red;

  content: "";

  position:absolute;

  right:-40px;

}

第七步，改下颜色就好了。

完整代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>demo of starof</title>

<style>

.middle{

text-align:center;

}

.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 black;

  border-bottom: 20px solid black;

  content: "";

  position:absolute;

  left:-40px;

}

.title::after{

  width: 0;

  height: 0;

  border-right: 40px solid transparent;

  border-top: 20px solid black;

  border-bottom: 20px solid black;

  content: "";

  position:absolute;

  right:-40px;

}

</style>

</head>

<body>

<div class="middle">

  <h5 class="title">升级有好礼</h5>

</div>

</body>

</html>

效果

3、浏览器兼容性

IE8如果要使用before和after伪元素，加上<!DOCTYPE html>，然后使用单冒号的:before和:after。

IE6，IE7是不支持的。

IE6和IE7兼容性的处理可参考：小tip:我是如何在实际项目中使用before/after伪元素的

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4832598.html有问题欢迎与我讨论，共同进步。

使用::before和::after来完成尖角效果的更多相关文章

  1. CSS3之尖角标签

    如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...

  2. (转载) css实现小三角（尖角）

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  3. css细节：尖角处理

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  4. WPF 气泡尖角在左边、下面、右边、上面

    由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...

  5. 百度前端笔试题目--css 实现一个带尖角的正方形

    今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...

  6. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...

  7. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  8. html如何绘制带尖角（三角）的矩形

    结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...

  9. CSS3样式linear-gradient的使用（切角效果）

    linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...

随机推荐

  1. Bootstrap左侧下拉三级菜单

    在线实例 效果一 效果二 效果三 使用方法 <script src="/api/jq/BootstrapCaidan/js/metismenu.js"></scr ...

  2. One Page Scroll – 实现苹果风格的单页滚动效果

    单页滚动网站已经被广泛使用了有一段时间了,它们对于快速提供信息是很有用的.One Page Scroll 是一个 jQuery 插件,简化了创建此类网站的步骤,只需创建 HTML 结构,进行简单设置, ...

  3. 25款创新的 PSD 格式搜索框设计素材【免费下载】

    这一次,我们给大家带来的素材是25款很有吸引力的搜索框 PSD 设计,你可以免费下载使用.有时候,搜索框容易被访客忽视,因为其简单和没有吸引力的设计.如果这是你所面对的问题,那么我们会鼓励你去看看在这 ...

  4. PHP插入header('content-type:text/html;charset="utf-8')和error_reporting()

    1.header PHP文件插入header("Content-type: text/html; charset=utf-8");相当于页面里面的<meta http-equ ...

  5. 高性能的JavaScript库---Lodash

    上周在仿做Nodejs社区的时候,遇到了lodash这个javascript库,很惭愧,那也是我第一次听说lodash.人嘛,对于新鲜的事物总是会或多或少感到些好奇的,于是就毫不犹豫地去lodash官 ...

  6. HTML 表单

    HTML 表单包含表单元素. <form> 元素定义 HTML 表单 表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. HTML 表单用于搜集不同类型的用户输入 ...

  7. SharePoint 2013 和卷影复制服务（VSS）概述

    对备份供应商而言,卷影复制服务 (VSS) 使用集中式 API 简化了 Microsoft 服务器解决方案的备份.Microsoft SharePoint Foundation 包括一个参考 VSS ...

  8. Cordoval在iOS中的运用整理

    一:关于Cordoval理论知识 1:PhoneGap是手机平台上流行的一款中间件.它构建在各种手机平台所提供的WebView(浏览器内核)组件的基础之上,使用javascript语言对应用开发者提供 ...

  9. 面试题：“你能不能谈谈，java GC是在什么时候，对什么东西，做了什么事情？”

    面试题目:地球人都知道,Java有个东西叫垃圾收集器,它让创建的对象不需要像c/cpp那样delete.free掉,你能不能谈谈: GC是在什么时候,对什么东西,做了什么事情? 以上算是三个问题,下面 ...

  10. 从零开始一个iOS项目（一）——基本准备以及cocopods的安装

    项目开发分为:独立开发和迭代开发,我主要讲独立开发,若读者是迭代开发,希望公司的代码一定要规范,便能省去许多麻烦,也能从中获益,闲时也可接些外包,赚一些外快,也是美差,然而独立开发最能锻炼人的能力. ...