使用::before和::after来完成尖角效果
一、目标
目标完成下图效果：
二、完成
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来完成尖角效果的更多相关文章
- CSS3之尖角标签
如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...
- (转载) css实现小三角（尖角）
在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...
- css细节：尖角处理
在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...
- WPF 气泡尖角在左边、下面、右边、上面
由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...
- 百度前端笔试题目--css 实现一个带尖角的正方形
今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...
- 用CSS实现文本框尖角
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- html如何绘制带尖角（三角）的矩形
结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...
- CSS3样式linear-gradient的使用（切角效果）
linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...
随机推荐
- jQuery静态方法type使用和源码分析
jQuery.type方法是检测数据类型的工具方法,在分析其用法之前先总结下js给我们提供了那些监测数据类型的方法: 一.typeof 操作符 下面是测试代码 var data=[],a='123', ...
- css3中filter的各种特效
css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q9-Q12)
Question 9 You are designing an external binary large object (BLOB) store provider by implementing t ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q78-Q80)
Question 78 You are designing an application configuration approach for a custom SharePoint 2010 app ...
- [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html 这个可以实现ImageView异步加载 ...
- java使用动态代理来实现AOP（日志记录）
以下内容为原创,转载时请注明链接地址:http://www.cnblogs.com/tiantianbyconan/p/3336627.html AOP(面向方面)的思想,就是把项目共同的那部分功能分 ...
- xmpp整理笔记：环境的快速配置(附安装包)
现在虽然环信的xmpp框架很火,但是也有一些弊端.环信的框架部分代码不开源,而且收费模式不科学,用户量一直低于免费线则好,一旦超过,收费极高. xmpp感觉还是从xmppFramework框架学起比较 ...
- android 最详细的动画大全，包括如何在代码和在XML中使用
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...
- 不用画线 设置UITableView的全屏分隔线
如图 添加如下代码 sTableView.separatorInset = UIEdgeInsetsZero; sTableView.layoutMargins = UIEdgeInsetsZero ...
- 10、技术经理要阅读的书籍 - IT软件人员书籍系列文章
技术经理是项目组中的重要角色.他需要负责软件项目中的重要部分,如果项目组没有架构师的话,技术经理还需要担负起架构师的职责.同时,技术经理要对项目中的所有重要的技术问题进行处理. 但是,在项目组内部,软 ...