>

拼装指南,三角形运用

- 编辑:至尊游戏网站 -

拼装指南,三角形运用

酷酷的 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是将一些图标作成字体文件,在CSS中钦点font-face和font-family,然后为各个Logo钦赐相应的class。
在网页中应用Icon Font就好像使用普通的文字同样,举例font-size属性可以设定Logo的轻重,设定color属性能够设定Logo的水彩。 越多内容,请参见Alibaba矢量图标管理网址:。

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成分,大家得以只提供多少个因素实现第三个三角形,然后依附CSS3的伪类达成第四个三角。
第三个三角形使用了相对固化,首个三角使用了相对定位,使得第一个三角形能够紧挨着第3个三角形。

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

本文由硬件数码发布,转载请注明来源:拼装指南,三角形运用