CSS图形基础:纯CSS绘制图形 | 您所在的位置:网站首页 › css画三角形箭头 › CSS图形基础:纯CSS绘制图形 |
为了在页面中利用CSS3绘制图形,在页面中定义
其中,container作为显示图形的画布(容器),shape描述所绘制的图形。 定义.container的样式规则如下: .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } 对shape设置不同的样式规则,可以绘制不同的图形。 1.利用边框属性border绘制基本图形在CSS中,可以用width和height属性设置一个元素的宽度和高度,background属性设置元素的背景色。例如,设置.shape的样式规则如下: .shape { position: absolute; height:200px; width:200px; background:#ff8c00; } 则可以在页面中绘制如图1所示的用深橙色填充的边长为200px的正方形。 图1 用深橙色填充的正方形 图1中,外面的红色圆角方框由.container样式决定,里面的用深橙色填充的边长为200px的正方形由.shape样式决定。完整的HTML文件内容如下。 CSS图形绘制 .container { margin: 0 auto; width: 300px; height:300px; position: relative; display:flex; justify-content:center; align-items:center; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .shape { position: absolute; height:200px; width:200px; background:#ff8c00; }
下面各图形绘制时,除了特别说明,我们只给出图形所对应.shape样式的定义,其余部分保持不变。这样修改.shape样式,可以绘制不同的图形。 例如,要绘制一个边长为200px的正方形(只有外框线,没有内部填充),可以修改.shape如下: .shape { position: absolute; height:200px; width:200px; border:4px solid #ff8c00; } 此时页面显示如图2所示,“画布”中显示的图形为一个边长为200px的正方形。其中,用到了border属性进行边框样式的设置。 图2 正方形 border属性是一个缩写的边框属性,用于设置元素所有的边框属性。可以设置的属性分别(按顺序)为:border-width(边框宽度)、border-style(边框样式)和border-color(边框颜色)。 本文中会用到包括border在内的许多CSS属性,这些属性的格式和功能我们不一一介绍,只是拿过来应用。需要了解这些属性功能和使用方法的读者可以参看《CSS参考手册》(https://www.w3cschool.cn/cssref/3ps212do.html)。 (1)三角形。 修改.shape如下: .shape { position: absolute; height:50px; width:50px; border-top: 100px solid orange; border-left: 100px solid blue; border-right: 100px solid green; border-bottom: 100px solid red; } 可在页面中看到如图3所示的图形。 图3 四个梯形围成正方形 在图3中,橙色梯形块代表是上边框宽度,蓝色梯形块代表左边框宽度,红色梯形块代表下边框宽度,绿色梯形块代表右边框宽度,对几个边距的宽度而言,它们之间的分界恰好是这个正方形的对角线所在的直线,如果里面的小正方形宽高无穷小(将shape样式定义中width和height的属性值均设为0),那么这个图形将是一个由四块不同颜色三角形拼接而成的图形,如图4所示。 图4 四个三角形拼成正方形 修改.shape如下: .shape { position: absolute; height:0px; width:0px; border-left: 100px solid blue; border-right: 100px solid green; border-bottom: 200px solid red; } 可在页面中看到如图5所示的图形。 图5 三个三角形拼成一个正方形 修改上面样式中左、右或下边框的填充色为背景色或transparent,相当于切掉了该边框,这样可以组合为不同的三角形。 例如,修改.shape样式定义为: .shape { position: absolute; height:0px; width:0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid red; } 可在页面中看到如图6所示的等腰三角形。 图6 等腰三角形 又如,修改.shape样式定义为: .shape { position: absolute; height:0px; width:0px; border-left: 100px solid blue; border-bottom: 200px solid transparent; } 可在页面中看到如图7所示的直角三角形。 图7 直角三角形 再如,修改.shape样式定义为: .shape { position: absolute; height:0px; width:0px; border-right: 100px solid green; border-bottom: 100px solid transparent; } 可在页面中看到如图8所示的等腰直角三角形。 图8 等腰直角三角形 (2)平行四边形和梯形。 将一个矩形框进行倾斜,可以得到平行四边形。修改.shape样式定义为: .shape { position: absolute; height:100px; width:200px; background:#ff8c00; transform: skew(20deg); } 可在页面中看到如图9所示的平行四边形。 图9 平行四边形 修改.shape样式定义为: .shape { width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #ff8c00; position: relative; top:-50px; } .shape:after { content: ''; position: absolute; top: 70px; left:-50px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid #ff8c00; } 可在页面中看到如图10所示的菱形。 图10 菱形 修改.shape样式定义为: .shape { position: absolute; width:100px; border-bottom: 150px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } 可在页面中看到如图11所示的梯形。 图11 梯形 (3)圆、圆环和椭圆。 利用border-radius属性可以为元素设置圆角边框,这样可以绘制各种圆形。 修改.shape样式定义为: .shape { position: absolute; width:150px; height:150px; background:#8A2BE2; border-radius:50%; } 可在页面中看到如图12所示的圆形。 图12 圆 将上面绘制圆的样式中的“height:150px;”改成“height:50px;”,其余保持不变,则得到如图13所示的椭圆。 图13 椭圆 将两个椭圆旋转后交叉在一起,可以构成一个红叉叉。修改.shape样式定义为: .shape { position: relative; width: 160px; height: 24px; background-color: #f00; transform: rotate(45deg); border-radius: 50%; } .shape:after { content: ""; position: absolute; width: 160px; height: 24px; background-color: #f00; transform: rotate(90deg); border-radius: 50%; } 可在页面中看到如图14所示的红叉叉。 图14 红叉叉 修改.shape样式定义为: .shape { width: 100px; height: 50px; background: #8A2BE2; border-radius: 100px 100px 0 0; } 可在页面中看到如图15所示的半圆。 图15 半圆 修改.shape样式定义为: .shape { width: 100px; height: 100px; background: #8A2BE2; border-radius: 100px 0 0 0; } 可在页面中看到如图16所示的四分之一圆(扇形)。 图16 扇形 修改.shape样式定义为: .shape { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-radius: 50%; } 可在页面中看到如图17所示的图形,这个图形是游戏中的“食人豆”。 图17 “食人豆” 修改.shape样式定义为: .shape { width: 126px; height: 180px; background-color:#FFEFD5; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } 可在页面中看到如图18所示的鸡蛋。 图18 鸡蛋 修改.shape样式定义为: .shape { width: 100px; height: 100px; border: 15px solid red; position: relative; border-radius: 50%; } 可在页面中看到如图19所示的圆环。 图19 圆环 为一个圆环加上一个倾斜的手柄,可以绘制出一个放大镜。修改.shape样式定义为: .shape { width: 64px; height: 64px; border: 10px solid black; position: relative; border-radius: 50%; } .shape:before { content: ""; position: absolute; right: -40px; bottom: -16px; border-width: 0; background: black; width: 56px; height: 10px; transform: rotate(45deg); } 可在页面中看到如图20所示的放大镜。 图20 放大镜 修改.shape样式定义为: .shape { width: 100px; height: 100px; border: 15px solid white; position: relative; border-radius: 50%; border-top: 15px solid red; border-left: 15px solid orange; border-bottom: 15px solid green; border-right: 15px solid blue; } 可在页面中看到如图21四色圆环。 图21 四色圆环 修改.shape样式定义为: .shape { width: 120px; height: 120px; border-left: 60px solid green; border-right: 60px solid blue; border-top: 60px solid red; border-radius: 50%; } 可在页面中看到如图22所示的不规则圆环。 图22 不规则圆环 若保留图22中的红色,将另外两种颜色设为transparent,可在页面中看到如图23所示的扇面。若只保留蓝色,则可在页面中看到如图24所示的牛角。 图23 扇面 图24 牛角 修改.shape样式定义为: .shape { width: 0px; height: 0px; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 120px solid red; border-radius: 50%; } 可在页面中看到如图25所示的圆锥形。 图 25 圆锥形 (4)多边形。 修改.shape样式定义为: .shape { position: relative; width: 54px; border-top: 50px solid red; border-left: 18px solid transparent; border-right: 18px solid transparent; } .shape:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-bottom: 35px solid red; border-left: 45px solid transparent; border-right: 45px solid transparent; } 可在页面中看到如图26所示的五边形。这个五边形由两个基本图形拼合而成:一个是下面部分使用.shape定义的梯形,另一个是上面部分使用.shape:before定义的上三角形。三角形和梯形层叠到一起,从而形成五边形。 图26 五边形 修改.shape样式定义为: .shape { width: 138.5px; height: 80px; background: red; position: relative; } .shape:before { content: ""; position: absolute; top: -40px; left: 0; width: 0; height: 0; border-left: 69.25px solid transparent; border-right: 69.25px solid transparent; border-bottom: 40px solid red; } .shape:after { content: ""; position: absolute; bottom: -40px; left: 0; width: 0; height: 0; border-left: 69.25px solid transparent; border-right: 69.25px solid transparent; border-top: 40px solid red; } 可在页面中看到如图27所示的六边形。这个六边形由三个基本图形拼合而成:一个是中间部分使用.shape定义的矩形,另一个是上面部分使用.shape:before定义的上三角形,还有一个是下面部分使用.shape:after定义的下三角形。三个基本图形层叠到一起,从而形成六边形。并且图中的六边形还是一个正六边形。 图27 六边形 修改.shape样式定义为: .shape { width: 120px; height: 50px; background: red; position: relative; } .shape:before { content: ""; position: absolute; top: -35px; left: 0; border-bottom: 35px solid red; border-left: 35px solid transparent; border-right: 35px solid transparent; width: 50px; height: 0; } .shape:after { content: ""; position: absolute; top: 50px; left: 0; border-top: 35px solid red; border-left: 35px solid transparent; border-right: 35px solid transparent; width: 50px; height: 0; } 可在页面中看到如图28所示的八边形。这个八边形由三个基本图形拼合而成:一个是中间部分使用.shape定义的矩形,另一个是上面部分使用.shape:before定义的底边大于顶边的梯形,还有一个是下面部分使用.shape:after定义的底边小于顶边的梯形。三个基本图形层叠到一起,从而形成八边形。并且图中的八边形还是一个近似正八边形。 图28 八边形 (5)多角星。 修改.shape样式定义为: .shape { position: relative; display: block; width:0px; height:0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom:70px solid red; transform:rotate(35deg); } .shape:before { content: ''; position: absolute; width: 0px; height: 0px; top: -45px; left: -62.5px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid green; transform: rotate(-35deg); } .shape:after { content: ''; position: absolute; width: 0px; height: 0px; top: 3px; left: -105px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid blue; transform:rotate(-70deg); } 可在页面中显示如图29所示的五角星。这个五角星是由三个三角形拼成的,由于文字描述不能精确,为了方便理解,将三个三角形设置成不同的颜色。 图29 五角星 修改.shape样式定义为: .shape { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } .shape:after { content: ""; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; top: 30px; left: -50px; } 可在页面中看到如图30所示的六角星。这个六角星是由两个三角形拼合而成的,一个三角形是使用.shape定义的上三角形,另一个是使用.shape:after定义的下三角形。它们层叠到一起,从而形成六角星。 图30 六角星 修改.shape样式定义为: .shape { background: red; width: 150px; height: 150px; position: relative; } .shape:after { content: ""; position: absolute; top: 0; left: 0; height: 150px; width: 150px; background: red; transform: rotate(45deg); } 可在页面中看到如图31所示的八角星。这个八角星由两个正方形拼合而成:一个正方形是使用.shape定义的,另一个是使用.shape:after定义的,它旋转了45°。两个正方形层叠到一起,从而形成八角星。 图31 八角星 修改.shape样式定义为: .shape { background: red; width: 150px; height: 150px; position: relative; } .shape:before, .shape:after { content: ""; position: absolute; top: 0; left: 0; height: 150px; width: 150px; background: red; } .shape:before { transform: rotate(30deg); } .shape:after { transform: rotate(60deg); } 可在页面中看到如图32所示的十二角星。这个十二角星由三个正方形拼合而成:一个正方形是使用.shape定义的,另一个是使用.shape:before定义的,它旋转了30°,还有一个是使用.shape:after定义的,它 旋转了60°。三个正方形层叠到一起,从而形成十二角星。 图32 十二角星 (6)其他组合图形。 修改.shape样式定义为: .shape { position: relative; width: 20px; height: 100px; background: red; } .shape:after { content: ""; position: absolute; left: -40px; top: 40px; width: 100px; height: 20px; background: red; } 可在页面中看到如图33所示的红十字。 图33 红十字 修改.shape样式定义为: .shape { position: relative; width: 100px; height: 90px; } .shape:before, .shape:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .shape:after { left: 0; transform: rotate(45deg); transform-origin :100% 100%; } 可在页面中看到如图34所示的心形。 图34 心形 修改.shape样式定义为: .shape { border-style: solid; border-color: transparent transparent #FFFAFA transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; } .shape:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: #FFFAFA transparent transparent transparent; border-width: 70px 50px 0 50px; } 可在页面中看到如图35所示的钻石。 图35 钻石 修改.shape样式定义为: .shape { position: relative; width: 212px; height: 100px; } .shape:before, .shape:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; border-radius: 50px 50px 0 50px; transform: rotate(-45deg); } .shape:after { left: auto; right: 0; border-radius: 50px 50px 50px 0; transform: rotate(45deg); } 可在页面中看到如图36所示的无穷大符号。 图36 无穷大 修改.shape样式定义为: .shape { position: relative; width:80px; height:80px; border: 15px solid transparent; border-top-color: red; border-bottom-color: red; border-radius: 50%; } .shape:before, .shape:after { content: ''; display: block; width: 0; height: 0; position: absolute; border: 15px solid transparent; border-bottom-color: red; } .shape:before { transform: rotate(135deg); right: -15px; top: -2.5px; } .shape:after { transform: rotate(-45deg); left: -15px; bottom: -2.5px; } 可在页面中看到如图37所示的圆弧箭头。 图37 圆弧箭头 2.利用box-shadow绘制图形在CSS中,属性box-shadow用于给对象实现图层阴影效果。利用box-shadow属性也可以绘制图形。 box-shadow的基本格式为: box-shadow: h-shadow v-shadow blur spread color inset; 各参数的含义说明如下: h-shadow必须设置,它表示阴影的水平偏移量,其值可以取正负值,如果值为正值,则阴影在对象的右边;若值为负值时,阴影在对象的左边。 v-shadow也必须设置,它表示阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部;其值为负值时,阴影在对象的顶部。 blur可选,表示阴影模糊半径,其值只能是为正值,如果值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊。 Spread可选,表示阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大;若值为负值时,则缩小。 Color可选,表示阴影颜色。 Inset可选,表示阴影类型。其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影。 另外,box-shadow可以使用一个或多个投影,如果使用多个投影时,必须用逗号“,”分开。 例如,若定义.shape样式规则如下: .shape { width: 80px; height: 60px; background: #ff008c; border: 6px solid blue; box-shadow: 40px 30px green; } 则在页面中显示如图38所示的图形。 图38 绿色投影(outset) 若在box-shadow定义中加上inset,则显示的图形如图39所示。 图39 绿色投影(inset) 由此可知,对象阴影同box模型的层次一样,外阴影会在对象背景之下,内阴影会在边框之下背景之上。所以整个层级就是:边框>内阴影>背景图片>背景颜色>外阴影。 利用box-shadow属性,我们可以在页面中绘制图形。 例如,修改.shape样式定义为: .shape { width: 0; color: #f00; border: 15px solid transparent; border-top: 25px solid; box-shadow: 0 -32px 0 -6px; } 可在页面中显示如图40所示的下载箭头。 图40 下载箭头 一般而言,一个div之类的元素通过设置border属性可以绘制一个基本图形,加上:before和:after两个伪类,最多可进行三个基本图形组合。若需要更多图形组合,border属性就有点无能为力了,增加div的定义个数是一种办法。有时,通过box-shadow属性设置多个投影来解决,可能更方便。这也是box-shadow属性的一大优势。 例如,修改.shape样式定义为: .shape { width: 40px; height: 0; color: red; box-shadow: 20px 20px 0 4px ,20px 0 0 4px ,20px 40px 0 4px; } 可在页面中显示如图41所示的图形。 图41 三道杠 再修改.shape样式定义为: .shape { width: 40px; height: 0; color: red; box-shadow: 20px 20px 0 3px ,20px 0 0 3px ,20px 40px 0 3px, 20px 10px 0 3px ,20px 30px 0 3px; } 可在页面中显示如图42所示的五道杠。 图42 五道杠 修改.shape样式定义为: .shape { position: relative; width:80px; height:80px; box-shadow:-30px 0px 0px red,0px -30px 0px yellow, 30px 0px 0px green,0px 30px 0px blue; } 可在页面中显示如图43所示的图形。 图43 四色方框 修改.shape样式定义为: .shape { position: relative; width: 40px; height: 40px; background-color: black; border-radius: 50%; box-shadow: 0 0 0 15px #fff,0 0 0 25px #000; } 可在页面中显示如图44所示的单选按钮。 图44 单选按钮 修改.shape样式定义为: .shape { width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 white; } 可在页面中看到如图45所示的弯月。 图45 弯弯的月亮 修改.shape样式定义为: .shape { width: 40px; height: 40px; background: #fff; border-radius: 50%; box-shadow: #fff 22px -15px 0 6px, #fff 57px -6px 0 2px, #fff 87px 4px 0 -4px, #fff 33px 6px 0 6px, #fff 61px 6px 0 2px, #ccc 29px -23px 0 6px, #ccc 64px -14px 0 2px, #ccc 94px -4px 0 -4px; } 可在页面中看到如图46所示的云朵。 图46 云朵 修改.shape样式定义为: .shape { width:160px; height:160px; border-radius: 50%; box-shadow: inset 0 0 0 16px #fff, -80px -80px 0 -64px #f00, 0 -112px 0 -64px #f0f, 80px -80px 0 -64px #ff0, -80px 80px 0 -64px #0f0, 0 112px 0 -64px #0ff, 80px 80px 0 -64px #00f, -112px 0 0 -64px #808, 112px 0 0 -64px #000; } 可在页面中看到如图47所示的图形,在一个圆环的周围围了8个小圆。 图47 圆环周围的小圆 |
CopyRight 2018-2019 实验室设备网 版权所有 |