美文网首页IT修真院-前端
CSS可以绘制哪些常见的特殊形状?

CSS可以绘制哪些常见的特殊形状?

作者: 未成年面包_d036 | 来源:发表于2017-08-09 23:55 被阅读0次

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

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

1.背景介绍

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

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

3.常见问题

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

4.解决方案

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;

}

6.扩展思考

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

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

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

}

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

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

效果如下:

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

.test-border{

width:0;

height:0;

border-top:50px solid #ff0000;

border-bottom:50px solid #00a000

;border-left:50px solid #ff7f50;

}

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

.test-border{

width:0;

height:0;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-left:50px solid #ff7f50;

}

便得到了一个左三角形

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

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;

}

7.参考文献

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

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

8.更多讨论

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

9.鸣谢

感谢大家观看

BY : 周霆伟|马靖哲

PPT链接

视频链接:密码: zvcu

技能树.IT修真院

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

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

猛戳这里

相关文章

  • CSS可以绘制哪些常见的特殊形状?

    大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员 今天给大家分享一下,修真院官网cs...

  • css仿聊天气泡样式

    css仿聊天气泡 *推荐大家一个css绘制形状的网站:https://css-tricks.com/the-sha...

  • CSS.Serects 形状的绘制

    总结 没错!我就是要在开头做总结!哈哈哈哈!其实是因为这章的内容比较简单,容易理解,所以先总结出这章的思想。1.活...

  • CSS 绘制特殊图形

    概要 实例 一些简单的图形 源码 在浏览器中的效果 复杂的特殊图形 链接:【原创教程】使用CSS3绘制腾讯QQ的企...

  • CSS 绘制特殊图形

    先来绘制一个简单基础容器 从示例1 和 示例2(通过把示例1的宽高设置为0得到)可以看出,容器的 border 是...

  • 常见的形状有哪些

    常见的形状包括二维形状和三维形状。 二维叫形。 三维叫状。 常见的二维图形包括圆、线段、三角形、正方形、长方形、菱...

  • 如何使用CSS 绘制各种形状?

    很多小伙伴在做开发的时候,遇到一些要画很多形状的时候,就很纠结了,知道怎么用CSS去布局,就是不知道怎么画图案。 ...

  • CSS3绘制各种形状

    现在的CSS功能非常强大了,特别是CSS3的属性,例如转换属性,过渡属性,动画属性,能做的效果非常多。在网页开发中...

  • CSS3绘制各种形状

    本文为叩丁狼高级讲师原创文章,转载请注明出处。 现在的CSS功能非常强大了,特别是CSS3的属性,例如转换属性,过...

  • css3 绘制画圆、扇形

    css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形 实现圆形...

网友评论

    本文标题:CSS可以绘制哪些常见的特殊形状?

    本文链接:https://www.haomeiwen.com/subject/tugqrxtx.html