好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

一、目标

目标完成下图效果:

二、完成

1、分析

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

2、完成

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

代码如下:

 .middle{text-align:center;}.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;padding:0 50px;} 

升级有好礼

查看更多关于使用::before和::after来完成尖角效果_html/css_WEB-ITnose的详细内容...

  阅读:30次