澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

三角形运用,拼装指南

酷酷的 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)

大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员

CSS也可以实现一些好玩的东西,比如我们用CSS实现一个三角形。原理:需要把元素的宽度、高度设置为0,然后为其设置边框。需要哪个边框设置哪个边框的颜色,相邻边框的颜色设置color为transparent,对应边框可以设置color为transparent也可以不设置。代码如下:

HTML代码:
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>

概述

在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。

在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!

本文的Demo和源代码已放到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); }

今天给大家分享一下,修真院官网css任务5,深度思考中的知识点——CSS可以绘制哪些常见的特殊形状

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>用CSS画三角形</title><style>.triangle {width: 0;height: 0;border-top: 20px solid transparent;border-right: 20px solid transparent;border-left: 20px solid transparent;border-bottom: 20px solid #ff0000;}</style></head><body><div ></div></div></body></html>


图例

我们先来看一副设计图

图片 1

这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给抠出来。
除此之外,出现在这幅设计图的一些特殊形状和小图标,都可以通过CSS3来实现。
我们将这些特殊形状和小图标分为两类:

1. 可以用Icon Font实现的

图片 2图片 3

Icon Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
在网页中使用Icon Font就像使用普通的文字一样,比如font-size属性可以设定图标的大小,设定color属性可以设定图标的颜色。 更多内容,请参考阿里巴巴矢量图标管理网站:。

2. 不能用IconFont实现的

图片 4

为什么这些图形不用IconFont实现呢?因为通常Icon Font提供的都是一些正方形的矢量图标,也就是长等于宽的图标。
本篇要讲的就是如何通过CSS3来实现这4个图形。

三、小结

本篇文章主要总结了一些制作 CSS icon 必要的知识,就像搭积木一样,有了基础的形状,剩下的就是发挥想象,运用最少的代码实现想要的 CSS icon,其实 CSS 还有个优势就是应用动画效果,只是在这里没有体现。如果比较感兴趣的话可以看看最后的 CSS icon 资源,里面有不少技巧值得学习。

1.背景介绍

在写网页的时候,会遇到需要装饰一些几何图形的情况,用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真,文件的占用空间较小,也可以减少http的请求。

效果如下:图片 5image.png

CSS代码:
.test1{
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;
}
.test2{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid orange;
}
.test3{
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.test4{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
}

三角形

不知大家注意到了没有,这4个图形都包含了一个特殊的元素——三角形。
这4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性。

CSS icon 资源:



2.知识剖析

在css绘制图形时,一般要使用到border-radius,transform(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现

border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时,相对的是包含边框,padding后的尺寸。而不是单纯地相对于width/height值。

旋转 rotate

用法:transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

缩放 scale

用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数;

一个参数时:表示水平和垂直同时缩放该倍率

两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

倾斜 skew

用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

一个参数时:表示水平方向的倾斜角度;

两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

移动 translate

用法:transform: translate(45px)  或者 transform: translate(45px, 150px);

参数表示移动距离

本篇主要会用到skew和rotate

用CSS实现一个提示框:先设置好边缘框,再画一个三角形定位在边缘框上,再画一个白色三角形,调整其定位使其覆盖掉前面三角形的某一边。代码如下:


长方形边框

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>

如大家所认知的,这只是一个简单的长方形,这个长方形在画面中是这样显式的:

图片 6

这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。

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>

在画面中,每个边框都变成一个梯形了。

图片 7

为什么它会变成梯形呢?

图片 8

请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。
于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。

3.常见问题

如何用CSS绘制圆形(椭圆形)/三角形(梯形)/平行四边形

<style>.triangle {position: relative;width: 100px;height: 50px;border: 1px solid #5b5b5b;border-radius: 5px;}.triangle:before {position: absolute;content: "";top: -10px;left: 20px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #5b5b5b;}/* 设置白色三角形 /.triangle:after {position: absolute;content: "";/ 适当减小几个像素 */top: -9px;left: 20px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #fff;}</style></head><body><div ></div></body>

由此可见 ,控制css的border即可实现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!左边和右边都是三角形了 耶!

图片 9

为什么上边和下边还是梯形呢?这是因为块级元素默认会在页面上水平平铺。 理解这一点,让上边和下边也变成三角形就简单了,将元素的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个边框都是三角形了。

图片 10

假设我们不要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>

图片 11

4.解决方案

效果如下:图片 12image.png

在线生成:http://apps.eky.hk/css-triangle-generator/zh-hant

图案实现

知道了三角形的实现方法,那么下面4个图案实现起来就小Case了。

图片 13

这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;
}

5.编码实战

圆形/椭圆形

.circle{

width:10rem;

height:10rem;

border-radius:50%;

background:orange;

}

椭圆形只需改变矩形的边长

三角形/梯形

.triangle{

margin-top:5rem;

width:0;

border-bottom:5rem solid#00a000;

border-left:5rem solid transparent;

border-right:5rem solid transparent;

}

梯形只需设定width的值即可

三角形运用,拼装指南。平行四边形

.parallelogram{

margin:5rem;

width:10rem;

height:5rem;

transform:skew(30deg);

background:orange;

}

个人前端学习笔记均为原创。首发CSDN: Freya_三角形运用,拼装指南。yyy的博客 。欢迎交流和指导。我是木风,愿你遇见美好!

实现旗帜

旗帜图案是下半部分被啃掉了一口的长方形,这一口是个三角形。

图片 14
根据以上知识,我们很自然地就能想到实现方法,将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;
}

6.扩展思考

1.css绘制三角形的原理是什么

首先来看一下正常块元素设置四条不同颜色边框效果:为了效果明显,所有边框宽度均为50px;

图片 15

上图 html 和 css 代码如下:

;)

.test-border{

border-top:50px solid #ff0000;

border-bottom:50px solid #00a000;

border-left:50px solid #ff7f50;

border-right:50px solid #436eee;

}

当我去掉内容时

效果如下:

;)

.test-border{

width:0;height:0;

border-top:50px solid #ff0000;

border-bottom:50px solid #00a000;

border-left:50px solid #ff7f50;

border-right:50px solid #436eee;

}

;)

图片 16

我相信,看到上面效果图,距离实现三角形四个方向带箭头已经不远了,

如果我们将上图的下边框颜色设置为透明,即 border-right: 50px solid transparent;

效果如下:

图片 17

如果我们我们去掉 border-right ,效果相信大家都能猜到,CSS 和 如下图所示:

;)

.test-border{

width:0;

height:0;

border-top:50px solid #ff0000;

border-bottom:50px solid #00a000

;border-left:50px solid #ff7f50;

}

图片 18

我们将上边框和下边框的颜色设置成透明

;)

.test-border{

width:0;

height:0;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-left:50px solid #ff7f50;

}

;)

图片 19

便得到了一个左三角形

2.如何绘制一个简单的气泡框

图片 20

HTML部分

<div class="tip">

     <div class="tri">

     </div>

</div>

css部分:

.tip{

width:20rem;

height:4rem;

background:#b9e9f5;

position:relative;

margin-bottom:5rem;

}

.tri{

width:0;

height:0;

position:absolute;

top:4rem;

left:10%;

border-top:1.8rem solid#b9e9f5;

border-right:0.9rem solid transparent;

border-left:0.9rem solid transparent;

}

实现双实心箭头

双实心箭头则是由两个三角形组成的

图片 21

为了减少页面的HTML元素,我们可以只提供一个元素实现第1个三角形,然后借助CSS3的伪类实现第2个三角形。
第1个三角形使用了相对定位,第2个三角形使用了绝对定位,使得第2个三角形能够紧挨着第1个三角形。

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的颜色来控制的。

7.参考文献

参考一:经典CSS实现三角形图标原理解析

参考二:CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

实现气泡

气泡是我们常见的一种图案,它是由一个三角形和一个长方形组成的。

图片 22

由于三角形是放在长方形前面的,所以我们使用: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;
}

8.更多讨论

用css绘图五角星是如何做成的?

实现丝带

丝带的实现则稍微复杂一些,不过我们可以将它拆分成3个部分:

  1. 一个显示文字的长方形
  2. 左右两侧的耳朵(被啃了一口的长方形)
  3. 在下方用于显示阴影的两个小三角形

图片 23

第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;
}

图片 24

第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);
}

图片 25

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

最终效果:

图片 26

9.鸣谢

感谢大家观看

BY : 周霆伟|马靖哲

PPT链接

视频链接:密码: zvcu

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !

猛戳这里

页面实现

有以上的知识基础,实现本文开头的设计图就较为简单了。
由于代码较长,我就不贴出来了,请各位直接到GitHub上查看这个demo吧。

View Demo

总结

读完以上内容,是不是觉得实现这些图案变得很简单了?是不是感觉很酷?现在你可以叫自己为爸爸了。
三角形的运用场景非常之多,你尽可以发挥你的想象去实现它们!

2 赞 20 收藏 2 评论

图片 27

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:三角形运用,拼装指南