全目录

本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:

  1. css揭秘实战技巧- 背景与边框 [一]
  2. css揭秘实战技巧- 形状 [二]
  3. css揭秘实战技巧 - 视觉效果[三]
  4. css揭秘实战技巧 - 字体排印[四]
  5. css揭秘实战技巧 - 用户体验[五]
  6. css揭秘实战技巧 - 结构与布局[六]
  7. css揭秘实战技巧 - 过渡与动画[七]

前言

本节课要将的内容:

  1. 自适应椭圆
  2. 平行四边形
  3. 菱形图片
  4. 简单的饼图
  5. 三角形
  6. 总结

一:自适应椭圆

1. 正方形

代码如下:

width: 100px;
height: 100px;
background: greeen;
复制代码

接下来,我们通过设置border-radius来改变一下正方形的形状:

2. 圆形

width: 100px;
height: 100px;
background: greeen;
//border-radius: 50px;
//border-radius: 50px 50px;
//border-radius: 50%;
//border-radius: 100px;以上四种写法都可以实现圆形的效果,也就是说:border-radius的值可以是具体值,也可以是百分比(为了代码的可拓展性,最好用百分比),同时,只要值大于正方形的长度的一半(例如:此处是50px),结果一定是圆形.
复制代码

3. 单独设置四个角半径的的圆

实现代码如下:

width: 100px;
height: 100px;
border-radius: 50px 40px; //等价于50px 40px 50px 40px;方向依次是从左上角开始顺时针旋转!
background: green;
复制代码

4. 单独设置水平方向和垂直方向的圆

代码如下:

width: 100px;
height: 100px;
border-radius: 50px / 40px; //用 / 隔开
background: green;
复制代码

5.椭圆

代码如下:

width: 200px;
height: 100px;
border-radius: 50% / 50%; //前提是宽高不同
background: green;
复制代码

6. 半椭圆

代码如下:

width: 100px;
height: 100px;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
background: green;
复制代码

7. 四分之一椭圆

代码如下:

width: 200px;
height: 100px;
border-radius: 100% 0 0 0 / 100% 0 0 0;
background: green;
复制代码

注意:从椭圆,到半椭圆,再到四分之一椭圆,我们要理解border-radius是怎么设置的,这就和border-radius的值的写法有关了:border-radius: 50% 50% 50% 50% / 50% 50&% 50% 50%;其他简写都可以转换成前面的写法,方向是从左上角开始顺时针旋转,/ 前面是水平方向的半径,后面是垂直方向的半径。

二:平行四边形

我们平时项目中,尤其是公司官网设计的时候,很多时候会遇到这种平行四边形的按钮效果,效果如下:

如何实现平行四边形效果的按钮呢?

我们可能会这样想,矩形其实是平行四边形的超集,所以只需要把矩形斜向拉伸一下不久可以啦。

然后,我们使用transform: skewX(45deg)拉伸以下,代码如下:

width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background: green;
transform: skewX(-45deg);
复制代码

呀,怎么里面的内容也被拉伸了,怎么解决呢?最直接的方法内容部分再嵌套一层div,然后再单独设置内容的拉伸角度, 但是,如果还是只有这一个div呢?如何用css去解决这一问题呢? 代码如下:

div{position: relative;width: 200px;height: 100px;text-align: center;line-height: 100px;
}
div::before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;background: green;transform: skewX(-45deg);
}
复制代码

这是一个小技巧: 利用伪元素以及定位属性,将伪元素设置成一个方块(其实相当于还是嵌套的一个元素),并且对方块进行变形,且设置z-index:-1,将该伪元素作为一个背景块,放在内容下面。当我们想要某个元素变形,并且不希望该元素里面的内容变形的时候,都可以采用该方法。

三:菱形图片

  1. 首先,我们很容易想到,把一个正方形,使用transform:rotate() 旋转一下即可。 代码如下:
width: 100px;
height: 100px;
background: green;
transform: rotate(-45deg);
复制代码

但是这种方案其实有个问题:我们设置的宽高分别为100px, 但是旋转以后,元素所占的空间就需要扩大,否则会出现如下情况

所以采用这种方案,需要我们手动去控制菱形所占的区域,即对角线的长宽。

  1. 接下来,我们采用另外一种方案,clip-path, 类似于svg中的path,我们可以指定一系列的坐标点,然后连起来,形成我们任意想要的图形。 代码如下:
width: 200px;
height: 100px;
background: green;
clip-path:  polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
复制代码

效果如下:

总结:这里,我们采用clip-path绘制了四个点,效果是菱形,同样,我们可以去绘制三个点的三角形,还有五边形,六边形等等各种图形,只要你确定好各个点的位置即可。同时要注意的是,clip-path目前的兼容性可能还没有支持的很好。

四:简单的饼图

首先,看一下最简单的圆形效果:

代码如下:

width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
复制代码

然后,我们看一下接下来的效果:两半圆

我们来分析一下两半圆的实现方案:

  1. 通过添加两个元素,设置左边圆和右边圆,然后拼接在一起, 或者为了只使用一个元素,可以同时使用before和after分别设置左半圆和右半圆
div {width: 100px;height: 100px;border-radius: 50%;position: relative;
}
div::before {content: '';display: inline-block;width: 50%;height: 100%;border-radius: 200% 0 0 200% / 100% 0 0 100%;background: green;position: absolute;left: 0px
}
div::after {content: '';display: inline-block;width: 50%;height: 100%;border-radius: 0 200% 200% 0 / 0 100% 100% 0;background: red;position: absolute;right: 0px
}复制代码
  1. 通过linear-gradient渐变实现。
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to right, green 50%, red 0);
复制代码

3.通过linear-gradient结合背景颜色实现。

width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
background-image: linear-gradient(to right, transparent 50%, red 0);
复制代码

接下来,我们再近一步,看一下如下效果:

首先,我们来分析一下,相对于我们之前两个半圆的效果,只要在此基础上,再加一个半圆,并且背景颜色设置为green, 然后覆盖在当前两半圆上,同时控制旋转的角度,这样不就得到了,

代码如下:

 div {width: 100px;height: 100px;border-radius: 50%;background: green;background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {content: '';display: inline-block;width: 50%;height: 100px;border-radius: 0 100% 100% 0 / 50% 50%;margin-left: 50%;background-color: inherit;transform: rotate(45deg);transform-origin: 0 50%;
}
复制代码

来来来,再近一步,从上面的代码,我们可以看到旋转的角度被写死为45deg, 如果可以动态的控制旋转的角度,不就可以得到类似进度条的效果了。效果如下:

所以,接下来,最关键的是如何动态控制旋转角度?简单啊,animation不就可以啦。

代码如下:

div {width: 100px;height: 100px;border-radius: 50%;background: green;background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {content: '';display: inline-block;width: 50%;height: 100px;border-radius: 0 100% 100% 0 / 50% 50%;margin-left: 50%;background-color: inherit;transform-origin: 0 50%;animation: spin  3s linear infinite, bg  6s step-end infinite;
}
@keyframes spin {to {transform: rotate(.5turn);}
}
@keyframes bg {50% {background: red;}
}
复制代码

五:三角形

首先,我们来看一下有边框的正方形:

代码如下:

width: 100px;
height: 100px;
border: 30px solid green;
复制代码

然后,我们设置不同的边框颜色

代码如下:

width: 100px;
height: 100px;
border: 30px solid green;
border-color: green blue yellow red;
复制代码

这个时候,我们是不是发现了一些惊喜呀,边框交界处,都是斜线,这个时候,我们很自然的联想到我们的三角形,这个时候,我们只要把宽高设置小一点,是不是就得到我们想要的三角形了呢。

啦啦啦,这个时候,惊喜就真的出现了,最后一个正方向就是右四个三角形组成的,

代码如下:

width: 0px;
height: 0px;
border: 30px solid green;
border-color: green blue yellow red;
复制代码

再近一步,我们这个时候把其中三个边框的颜色设置为白色或者透明,不就得到三角形了嘛,

代码如下:

width: 0px;
height: 0px;
border: 30px solid green;
border-color: green transparent transparent transparent;
复制代码

效果如下:

这就是我们想要的三角形啦,其原理就是:通过设置border,并且宽高都设置为0,利用边框交界处的斜线,就可以得到四个三角形构成的正方形或者长方形,然后再设置其中三个边框的颜色为透明,就可以得到我们想要的三角形了(其实还是一个正方形,只不过其中三个三角形的颜色是透明的)

六:总结

本节,我们实现了常见的一些椭圆,半圆,四分之一圆等效果,实现原理就是border-radius的使用,可以分别指定四个角在水平方向和垂直方向不同的半径值,同时,我们还知道了clip-path属性的使用,可以通过该属性绘制节点,然后连线,这样就可以实现任何我们想要的形状。

转载于:https://juejin.im/post/5cb82c475188253b454b74ee

css揭秘实战技巧 - 形状 [二]相关推荐

  1. css揭秘实战技巧- 背景与边框 [一]

    前言 这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...

  2. Android实战技巧之二十二:Android 5.1 SDK下载与配置

    重要文件下载地址: (1)http://dl-ssl.google.com/android/repository/sources-22_r01.zip (2)http://dl-ssl.google. ...

  3. 售前工程师工作内幕揭秘:面试实战技巧

    售前工程师工作内幕揭秘:面试实战技巧 前言 一.售前面试问题,基本就下面这些 二.售前工程师岗位普遍误区 三.售前工程师核心技能 四.面试中,主动出击,才是王道 五.对行业的了解是做好售前的基础 前言 ...

  4. 《CSS揭秘》-总结47个Css技巧(一):常用的背景与边框技巧

    注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...

  5. 【SQL开发实战技巧】系列(二):简单单表查询

    系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...

  6. 【SQL开发实战技巧】系列(十二):三问(如何对字符串字母去重后按字母顺序排列字符串?如何识别哪些字符串中包含数字?如何将分隔数据转换为多值IN列表?)

    系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...

  7. 【SQL开发实战技巧】系列(二十一):数据仓库中时间类型操作(进阶)识别重叠的日期范围,按指定10分钟时间间隔汇总数据

    系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...

  8. css常用效果总结,《CSS揭秘》-总结47个Css技巧(三):视觉效果

    注:本文案例转载于<CSS揭秘>这本书. 单侧投影 使用 box-shadow 的第四个参数:扩张半径. box-shadow 0 8px 3px -3px rgba(0,0,0,.5)/ ...

  9. 《CSS揭秘》读书笔记

    摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...

最新文章

  1. vscode 终端 进入node_安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
  2. 基于Python——实现远程下载sftp文件(只下载.zip文件)
  3. Linux系统中ctrl+c、 ctrl+z、 ctrl+\ 产生的信号名称
  4. hiho #1485 : hiho字符串(滑动窗口)
  5. elasticsearch in查询_Python Elasticsearch DSL 查询、过滤、聚合操作实例
  6. php 递归合并类 call,PHP多个数组合并(递归的进行)
  7. 数据库左连接查询时候的技巧.
  8. Mozart Update 1(杯具额…)
  9. .Net中如何操作IIS(原理篇)
  10. 计算机应用技术需要学数学吗,学计算机应用技术能不学数学吗?
  11. yxy小蒟蒻的201117总结
  12. 全球电动汽车充电标准最详解析
  13. Redis中set、setnx、setex区别
  14. 物联无线自动窗帘:窗帘收放更自如-智能家居
  15. Ray Marching
  16. 【2013Esri中国用户大会】ArcGIS的大数据挖掘和并行处理
  17. mongodb linux下集群搭建
  18. linux 命令行下wlan无线网卡配置 2
  19. 智能设计 | MixAI 知识库 No.69
  20. OpenAI推出iOS版ChatGPT,支持语音输入

热门文章

  1. lxcfs容器隔离技术实现原理分析之loadavg、cpuonline
  2. Dubbo思维导图知识点整理
  3. Go 如何利用multipart/form-data实现文件的上传与下载
  4. 使用Flink集群环境进行数据处理
  5. Spring Boot整合批量文件下载功能
  6. 设计模式---创建型模式
  7. 为C程序员准备的0x10个最佳问题
  8. 从linux刷到windows,我为什么从Linux重新回归到Windows平台
  9. 平衡二叉树搜索二叉树
  10. Dubbo之Filter链原理