新闻资讯

当前位置:新萄京娱乐场手机版 > 新闻资讯 > HTML标签添加伪元素,使得这些元素大多都可以由

HTML标签添加伪元素,使得这些元素大多都可以由

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-07 08:18

酷酷的 CSS3 三角形运用

2016/08/04 · CSS · 2 评论 · CSS3, 三角形

原稿出处: keepfool   

一、必要的CSS属性

1.伪类 ::before & ::after
大家知晓能够给 HTML标签加多伪成分,个中::befare、::after能够利用差不离具有的 CSS 属性,约等于说能够透过抬高伪成分让三个HTML标签完毕3个标签的体制效果,那样能够减掉在复杂的 CSS icon 中的标签数量,让HTML结构越来越精简。

div

.pseudo{ position:relative; width:150px; height:70px; margin:30px; background:#999; line-height:50px; text-align:center; color:#fff; } .pseudo::before{ content:"::before"; position:absolute; top:-20px; left:-20px; width:70px; height:50px; background:#368fdc; } .pseudo::after{ content:"::after"; position:absolute; bottom:-20px; right:-20px; width:50px; height:50px; background:#de3000; }
2.边框 border
border 是最常用的 CSS 属性,同期它也是在 CSS icon 中采纳效能最高的性质,原因在于 border 独特的渲染格局——当改换模盒的高宽与边框的值时,会显现区别形态。

.triangle_a { width: 30px; height: 30px; border-top: 30px solid #de3000; border-right: 30px solid #ecb400; border-bottom: 30px solid #87bb00; border-left: 30px solid #368fdc; } .triangle_b { width: 0px; height: 0px; border-top: 45px solid #de3000; border-right: 45px solid #ecb400; border-bottom: 45px solid #87bb00; border-left: 45px solid #368fdc; }

经过地点的例子能够见见当宽中度都设为0时, border 会呈现边界斜线,借助这一个个性,就足以创立多种多边形:

因为代码很多为此就联合列出:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Icon - iinterest</title> <style type="text/css"> /*resize*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu{ margin:0; padding:0;} body{ font-size:12px; -webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;} img{ border:none;} ol,ul{ list-style:none;} em{ font-style:normal;} a{ text-decoration:none;} .clearfix{ #zoom:1;} .clearfix:after{ content:' '; display:block; height:0; clear:both; color:#fff;} .big{ width:400px; height:400px; padding:100px;} .css-icon{ padding:10px; clear: both;} .css-icon div{ float:left; margin:20px;} /*梯形*/ .trapezoid { border-bottom: 60px solid #888; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 60px; } /*菱形*/ .diamond_narrow { width: 0; height: 0; border: 30px solid transparent; border-bottom: 50px solid #888; position: relative; top: -30px; } .diamond_narrow:after { content: ''; position: absolute; left: -30px; top: 50px; width: 0; height: 0; border: 30px solid transparent; border-top: 50px solid #888; } /*三角形*/ .triangle_down { width: 0px; height: 0px; border-top: 40px solid #888; border-right: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid transparent; } .triangle_left { width: 0px; height: 0px; border-top: 40px solid transparent; border-right: 40px solid #888; border-bottom: 40px solid transparent; border-left: 40px solid transparent; } .triangle_top { width: 0px; height: 0px; border-top: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #888; border-left: 40px solid transparent; } .triangle_right { width: 0px; height: 0px; border-top: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #888; } .triangle_righttop { width: 0px; height: 0px; border-top: 30px solid #888; border-right: 30px solid #888; border-bottom: 30px solid transparent; border-left: 30px solid transparent; } .triangle_rightbottom { width: 0px; height: 0px; border-top: 30px solid transparent; border-right: 30px solid #888; border-bottom: 30px solid #888; border-left: 30px solid transparent; } .triangle_leftbottom { width: 20px; height: 20px; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #888; border-left: 20px solid #888; } .triangle_lefttop { width: 20px; height: 20px; border-top: 20px solid #888; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #888; } </style> </head> <body> <div class="css-icon"> <div class="square"></div> <div class="parallelogram"></div> </div> <!-- border --> <div class="css-icon" style="margin-left:-30px"> <div class="triangle_left"></div> <div class="triangle_down"></div> <div class="triangle_top"></div> <div class="triangle_right"></div> </div> <div class="css-icon"> <div class="triangle_righttop"></div> <div class="triangle_rightbottom"></div> <div class="triangle_leftbottom"></div> <div class="triangle_lefttop"></div> </div> <div class="css-icon"> <div class="trapezoid"></div> <div class="diamond_narrow"></div> </div> </body> </html>

指示:你能够先修改部分代码再运行。

3.圆角 border-radius
也是常用的 CSS3 属性,能支持大家组织圆形、纺锤形、扇形等基础形状;
border-radius 的语法与margin、padding类似都以奉公守法上右下左的顺序,缩写方法也一样:
border-radius:10px; border-radius:10px 20px;
当然也能够独自定义叁个角:
border-top-right-radius:10px;
还要它也可以有相比较极其的语法:
border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
“/”前是指圆角的程度半径,”/”后是指圆角的垂直半径,并依照上右下左的一一。
看下列子:

.circle { width: 80px; height: 80px; background: #888; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

.oval { width: 100px; height: 50px; background: #888; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

.egg { display:block; width: 63px; height: 90px; background-color: #888; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

4.变形 transform
成立复杂的 CSS icon 时会时时应用,常用的效用包蕴:

旋转 rotate
-webkit-transform:rotate(-30deg)
-30deg 表示逆时针旋转30度
45deg 表示顺时针旋转45度

倾斜 skew
-webkit-transform:skew(20deg)
语法与 rotate 一样,通过 skew 达成矩形变平行四边形

缩放 scale
scale 的职能在于当大家必要改换 CSS icon 的尺寸时不用去壹个个修改高、宽、边框等属性,直接通过 scale 设置就OK了
-webkit-transform:scale(3, 3);
scale(3,3)的参数中,前八个象征高、后三个象征宽;那句的意思正是高宽都加大3倍,当然也能够安装为scale(1,3)、scale(-3,-3)

概述

在最早的前端Web设计开垦年份,完成都部队分页面成分时,大家务须要有正统的PS美术专门的学业阿爸,由PS美工阿爸来切图,做一些圆角、阴影、锯齿可能部分小Logo。

在CSS3涌出后,借助一些装有吸引力的CSS3属性,使得这么些因素多数都得以由开采人士本人来成功。在开班阅读那篇小说前,大家先喊个口号:不想当美术师的程序猿不是好设计员!

本文的德姆o和源代码已停放GitHub,要是您感觉本篇内容科学,请点个赞,或在GitHub上加个简单!

Triangle Demo  |  Page Demo  |  GitHub Source

二、组合基础形状

通过上边的CSS属性,能够轻易的创造出基础形状,而复杂的造型都以由轻巧的模样组合来的,上边举几个轻松的事例:

1.WIFI

.wifi{ position: relative; top:25px; left:30px; width: 20px; height: 20px; border-right: 9px solid #444; border-top: 9px solid transparent; border-left: 9px solid transparent; border-bottom: 9px solid transparent; border-radius: 100%; border-style: double; -webkit-transform: rotate(-90deg) scale(4, 4); -moz-transform: rotate(-45deg) scale(4, 4); -ms-transform: rotate(-45deg) scale(4, 4); -o-transform: rotate(-45deg) scale(4, 4); transform: rotate(-45deg) scale(4, 4); } .wifi:before{ position: absolute; top:3px; left:3px; content: ""; width: 0; height: 0; border-right: 7px solid #444; border-top: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid transparent; border-radius: 100%; }
2.型心

.heart { position: relative; width: 100px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
3.水滴

.water{ position: relative; width: 212px; height: 100px; } .water:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #368fdc; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

图例

大家先来看一副设计图

图片 1

那幅图复杂的因素十分少,布局也较为轻易,大家大概深入分析一下,供给PS美术专门的学业阿爹帮忙做的独有一件工作,正是将上半某个的紫蓝背景图给抠出来。
除了这几个之外,出现在那幅设计图的片段特种形状和小Logo,都足以经过CSS3来贯彻。
大家将这么些十分形状和小Logo分为两类:

1. 可以用Icon Font实现的

图片 2图片 3

Icon Font是将部分Logo作成字体文件,在CSS中钦赐font-face和font-family,然后为各样Logo钦赐相应的class。
在网页中应用Icon Font就像是使用普通的文字同样,比方font-size属性能够设定Logo的轻重,设定color属性能够设定Logo的颜色。 越来越多内容,请参见Alibaba矢量Logo管理网站:。

2. 不能用IconFont实现的

图片 4

为什么那个图片不用IconFont达成吗?因为日常来讲Icon Font提供的都以局地长方形的矢量Logo,也正是长也就是宽的Logo。
本篇要讲的便是什么样通过CSS3来落实那4个图形。

三、小结

本篇作品主要总括了一些构建 CSS icon 供给的文化,就如搭积木一样,有了根基的形状,剩下的就是抒发想象,运用最少的代码实现想要的 CSS icon,其实 CSS 还应该有个优势正是利用动画效果,只是在此间未有反映。假若相比感兴趣的话可以看看最终的 CSS icon 财富,里面有许多本领值得学习。

三角形

不知我们注意到了未有,那4个图形都包蕴了多少个特其他因素——三角形。
那4个图形,都是由三角形、正方形,大概是二个被啃掉了一口的圆锥形组成的。

CSS3是哪些促成三角形的吧?——答案是因而边框,也就是border属性。

CSS icon 资源:



圆柱形边框

HTML的块级成分都以正方形的,举例大家设定了以下样式:

JavaScript

<style> .simple-retangle { margin: 50px auto; width: 200px; height: 200px; border: 40px solid salmon; } </style> <div class="simple-retangle"></div>

1
2
3
4
5
6
7
8
9
<style>
    .simple-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border: 40px solid salmon;
    }
</style>
<div class="simple-retangle"></div>

如大家所体会的,那只是八个简易的长方形,那些纺锤形在镜头中是那样显式的:

图片 5

本条星型太单调了,再给它点颜色看看,大家来个五花八门边框吧。

JavaScript

<style> .colored-border-retangle { margin: 50px auto; width: 200px; height: 200px; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-retangle"></div>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .colored-border-retangle {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-retangle"></div>

在画面中,各种边框都改为三个梯形了。

图片 6

为什么它会成为梯形呢?

图片 7

请留心圆柱形的4个角,以左上角为例,它到底是属于左侧框照旧上边框呢?
左上角,既属于左边框,又属于上边框,角落的归属成了八个主题材料,浏览器为了不让边框打架,就让二个人各分八分之四吗。
于是乎左上角就被一分为二,产生了四个三角形,三角形临近哪个边框,就呈现那一个边框的颜料。

三角形的实现

再看看小说开端的4个图画,你是或不是又开掘了那样一个法则?每一个三角形都以“小家碧玉”的,它们从未内容
既然如此,我们把地点那一个美妙绝伦边框的矩形内容拿掉,看看会产生什么。

JavaScript

<style> .colored-border-empty-retangle { margin: 50px auto; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-empty-retangle"></div>

1
2
3
4
5
6
7
8
9
10
<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

呜,cool!左边和右边都以三角形了 耶!

图片 8

干什么上面和底下仍旧梯形呢?那是因为块级成分暗中同意会在页面上水平平铺。 精通那或多或少,让下边和下部也变为三角形就大致了,将成分的width属性设为0:

JavaScript

<style> .colored-border-empty-retangle { margin: 50px auto; width: 0; height: 0; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-empty-retangle"></div>

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    .colored-border-empty-retangle {
        margin: 50px auto;
        width: 0;
        height: 0;
        border-top: 40px solid coral;
        border-right: 40px solid lightblue;
        border-bottom: 40px solid lightgreen;
        border-left: 40px solid mediumpurple;
    }
</style>
<div class="colored-border-empty-retangle"></div>

现今光景左右4个边框都以三角形了。

图片 9

只要我们毫不4个三角形,也不要让它们凑一块,我们就只要1个三角形,该如何是好吗?
将其余3个边框的颜料设为透明色:

JavaScript

<style> .triangle-top, .triangle-right, .triangle-bottom, .triangle-left { margin: 20px auto; width: 0; height: 0; border: 100px solid transparent; } .triangle-top { border-top-color: coral; } .triangle-right { border-right-color: lightblue; } .triangle-bottom { border-bottom-color: lightgreen; } .triangle-left { border-left-color: mediumpurple; } </style> <div class="triangle-top"></div> <div class="triangle-right"></div> <div class="triangle-bottom"></div> <div class="triangle-left"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    .triangle-top,
    .triangle-right,
    .triangle-bottom,
    .triangle-left {
        margin: 20px auto;
        width: 0;
        height: 0;
        border: 100px solid transparent;
    }
    
    .triangle-top {
        border-top-color: coral;
    }
    
    .triangle-right {
        border-right-color: lightblue;
    }
    
    .triangle-bottom {
        border-bottom-color: lightgreen;
    }
    
    .triangle-left {
        border-left-color: mediumpurple;
    }
</style>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>

图片 10

油画实现

知情了三角形的落到实处格局,那么下边4个水墨画实现起来就小Case了。

图片 11

那4个图画分别是:旗帜,向右的双纯真箭头,气泡和丝带。

View Demo

为了有助于那三种图案的示范,大家先设定以下基础共通的体制

CSS

* { font-family: simhei, sans-serif; box-sizing: border-box; } html { font-size: 62.5%; } body { background-color: lightblue; } div { margin: 20px auto; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
    font-family: simhei, sans-serif;
    box-sizing: border-box;
}
 
html {
    font-size: 62.5%;
}
 
body {
    background-color: lightblue;
}
 
div {
    margin: 20px auto;
}

兑现规范

旗帜图案是下半片段被啃掉了一口的正方形,这一口是个三角形。

图片 12
依靠上述文化,大家很自然地就能够想达到成格局,将border-bottom的颜色设置为透明的。

CSS

.flag { width: 0; height: 0; border: 2rem solid #FF6600; border-top-width: 4rem; border-bottom-color: transparent; border-bottom-width: 2rem; }

1
2
3
4
5
6
7
8
.flag {
    width: 0;
    height: 0;
    border: 2rem solid #FF6600;
    border-top-width: 4rem;
    border-bottom-color: transparent;
    border-bottom-width: 2rem;
}

落到实处双真挚箭头

双真心箭头则是由五个三角组成的

图片 13

为了降低页面包车型大巴HTML成分,大家得以只提供二个要素落成第1个三角形,然后借助CSS3的伪类达成第一个三角形。
第2个三角形使用了相对固定,第二个三角使用了相对定位,使得首个三角能够紧挨着第四个三角形。

CSS

.rds-arrow-wrapper { position: relative; width: 20em; text-align: center; } .rds-arrow, .rds-arrow:after { display: inline-block; position: relative; width: 0; height: 0; border-top: 1rem solid transparent; border-left: 2rem solid #fff; border-bottom: 1rem solid transparent; border-right: 2rem solid transparent; } .rds-arrow { margin-left: 1rem; } .rds-arrow:after { content: ""; position: absolute; left: 100%; top: -1rem; bottom: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.rds-arrow-wrapper {
    position: relative;
    width: 20em;
    text-align: center;
}
 
.rds-arrow,
.rds-arrow:after {
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-left: 2rem solid #fff;
    border-bottom: 1rem solid transparent;
    border-right: 2rem solid transparent;
}
 
.rds-arrow {
    margin-left: 1rem;
}
 
.rds-arrow:after {
    content: "";
    position: absolute;
    left: 100%;
    top: -1rem;
    bottom: 0;
}

要求专一的是,箭头方向是向右的,但在CSS里面是通过border-left的颜色来决定的。

金玉锦绣气泡

气泡是我们广大的一种图案,它是由二个三角形和四个正方形组成的。

图片 14

是因为三角形是投身长方形后边的,所以大家使用:before伪类,并设置纯属定位。

CSS

.bubble { position: relative; background-color: #33AAEE; width: 10rem; height: 3rem; font-size: 2rem; line-height: 3rem; color: #FFF; text-align: center; } .bubble:before { position: absolute; content: ""; right: 100%; top: 1rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-right: 0.6rem solid #33AAEE; border-bottom: 0.6rem solid transparent; border-left: 0.6rem solid transparent; } .bubble .text { display: inline-block; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.bubble {
    position: relative;
    background-color: #33AAEE;
    width: 10rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem;
    color: #FFF;
    text-align: center;
}
 
.bubble:before {
    position: absolute;
    content: "";
    right: 100%;
    top: 1rem;
    width: 0;
    height: 0;
    border-top: 0.6rem solid transparent;
    border-right: 0.6rem solid #33AAEE;
    border-bottom: 0.6rem solid transparent;
    border-left: 0.6rem solid transparent;
}
 
.bubble .text {
    display: inline-block;
}

兑现丝带

丝带的兑现则有一些复杂一些,可是我们能够将它拆分成3个部分:

  1. 贰个来得文字的星型
  2. 左右两边的耳朵(被啃了一口的长方形)
  3. 在凡尘用于体现阴影的多个小三角形

图片 15

第1步:落成丝带主体圆锥形

CSS

.ribbon { position: relative; width: 10rem; height: 3rem; padding: 0.7rem 0; font-size: 1.6rem !important; color: #fff; text-align: center; background: #ff0066; }

1
2
3
4
5
6
7
8
9
10
.ribbon {
    position: relative;
    width: 10rem;
    height: 3rem;
    padding: 0.7rem 0;
    font-size: 1.6rem !important;
    color: #fff;
    text-align: center;
    background: #ff0066;
}

图片 16

第2步:完结丝带左右两边的耳朵

:before伪类完结左耳朵,:after伪类达成右耳朵

CSS

.ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -0.6rem; border: 1.5rem solid #ff0066; z-index: -1; } .ribbon:before { left: -2.4rem; border-right-width: 1.5rem; border-left-color: transparent; box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8); } .ribbon:after { right: -2.4rem; border-left-width: 1.5rem; border-right-color: transparent; box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.ribbon:before,
.ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -0.6rem;
    border: 1.5rem solid #ff0066;
    z-index: -1;
}
 
.ribbon:before {
    left: -2.4rem;
    border-right-width: 1.5rem;
    border-left-color: transparent;
    box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
}
 
.ribbon:after {
    right: -2.4rem;
    border-left-width: 1.5rem;
    border-right-color: transparent;
    box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}

图片 17

第3步:实现阴影

CSS

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #bf004c transparent transparent transparent; bottom: -0.6rem; } .ribbon .ribbon-content:before { left: 0; border-width: 0.6rem 0 0 0.6rem; } .ribbon .ribbon-content:after { right: 0; border-width: 0.6rem 0.6rem 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #bf004c transparent transparent transparent;
    bottom: -0.6rem;
}
 
.ribbon .ribbon-content:before {
    left: 0;
    border-width: 0.6rem 0 0 0.6rem;
}
 
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 0.6rem 0.6rem 0 0;
}

HTML代码:

XHTML

<div class="ribbon"> <span class="ribbon-content">金卡会员</span> </div>

1
2
3
<div class="ribbon">
    <span class="ribbon-content">金卡会员</span>
</div>

最后效果:

图片 18

页面完毕

有上述的文化底子,完结本文开始的安排性图就较为简单了。
是因为代码较长,笔者就不贴出来了,请各位直接到GitHub上查看这一个demo吧。

View Demo

总结

读完以上内容,是或不是感到完成这么些图案变得很简短了?是否感到很酷?今后你能够叫自个儿为慈父了。
三角形的利用气象十一分之多,你尽能够表明您的设想去贯彻它们!

2 赞 20 收藏 2 评论

图片 19

本文由新萄京娱乐场手机版发布于新闻资讯,转载请注明出处:HTML标签添加伪元素,使得这些元素大多都可以由

关键词: