图例

我们先来看一副设计图

图片 1

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

1. 可以用Icon Font实现的

图片 2图片 3

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

2. 不能用IconFont实现的

图片 4

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

4.解决方案

酷酷的 CSS3 三角形运用

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

原文出处: keepfool   

6.扩展思考

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

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

图片 5

上图 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;

}

😉

图片 6

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

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

效果如下:

图片 7

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

😉

.test-border{

width:0;

height:0;

border-top:50px solid #ff0000;

border-bottom:50px solid #00a000

;border-left:50px solid #ff7f50;

}

图片 8

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

😉

.test-border{

width:0;

height:0;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-left:50px solid #ff7f50;

}

😉

图片 9

便得到了一个左三角形

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

图片 10

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;

}

概述

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

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

本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

Triangle
Demo
 
|  Page
Demo
 
|  GitHub Source

3.常见问题

如何用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>

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

图片 11

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

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>

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

图片 12

为什么它会变成梯形呢?

图片 13

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

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

总结

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

2 赞 20 收藏 2
评论

图片 14

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

三角形

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

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

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;

}

实现旗帜

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

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

9.鸣谢

感谢大家观看

BY : 周霆伟|马靖哲

PPT链接

视频链接:密码:
zvcu

技能树.IT修真院

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

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

猛戳这里

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图