深度思考中的知识点——必威CSS可以绘制哪些常

酷酷的 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美术工作老爸来切图,做一些圆角、阴影、锯齿也许局地小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); }

前些天给大家狼吞虎咽一下,修真院官方网址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美术职业阿爹帮衬做的唯有风姿洒脱件专门的学问,正是将上半片段的青黄背景图给抠出来。
除了这几个之外,出现在此幅设计图的部分差别日常形状和小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 财富,里面有为数不菲本领值得学习。

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

本文由必威发布于必威-前端,转载请注明出处:深度思考中的知识点——必威CSS可以绘制哪些常

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。