你的位置:首页 > 软件开发 > 网页设计 > 使用::before和::after来完成尖角效果

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

发布时间:2015-09-23 18:00:07
一、目标目标完成下图效果:二、完成1、分析在::before和::after伪元素的用法一文中有说到使用::befrore和::after可以完成一个六边形。这个案例是用一个#star-six完成一个正三角形,通过::after实现一个倒三角形,然后绝对定位放好位置。我们接下来也 ...

一、目标

目标完成下图效果:

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

二、完成

1、分析

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

2、完成

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

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

代码如下:

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

原标题:使用::before和::after来完成尖角效果

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录