前言

  关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧

 

以下所有内容只使用一个HTML元素。任何类型的CSS,只要它至少在一个浏览器中支持。

一.  实现一个心形

  1. #heart {
  2. position: relative;
  3. width: 100px;
  4. height: 90px;
  5. }
  6. #heart:before{
  7. position: absolute;
  8. content: "";
  9. left: 50px;
  10. top:;
  11. width: 50px;
  12. height: 80px;
  13. background: red;
  14. -moz-border-radius: 50px 50px 0 0;
  15. -webkit-border-radius: 50px 50px 0 0;
  16. border-radius: 50px 50px 0 0;
  17. -webkit-transform: rotate(-45deg);
  18. -moz-transform: rotate(-45deg);
  19. -ms-transform: rotate(-45deg);
  20. -o-transform: rotate(-45deg);
  21. transform: rotate(-45deg);
           -webkit-transform-origin: 0 100%;
  22. -moz-transform-origin: 0 100%;
  23. -ms-transform-origin: 0 100%;
  24. -o-transform-origin: 0 100%;
  25. transform-origin: 0 100%;
  26. }
  27.  
  28. #heart:after {
  29. left:;
  30. position: absolute;
  31. content: "";
  32. top:;
  33. width: 50px;
  34. height: 80px;
  35. background: red;
  36. -moz-border-radius: 50px 50px 0 0;
  37. -webkit-border-radius: 50px 50px 0 0;
  38. border-radius: 50px 50px 0 0;
  39. -webkit-transform: rotate(45deg);
  40. -moz-transform: rotate(45deg);
  41. -ms-transform: rotate(45deg);
  42. -o-transform: rotate(45deg);
  43. transform: rotate(45deg);
  44. -webkit-transform-origin: 100% 100%;
  45. -moz-transform-origin: 100% 100%;
  46. -ms-transform-origin: 100% 100%;
  47. -o-transform-origin: 100% 100%;
  48. transform-origin :100% 100%;
  49. }

效果

原理:这个心形主要是由两部分交叠组成

  1. border-radius: 50px 50px 0 0;
  2. /* 等价于 */
  3. border-top-left-radius: 50px;
  4. border-top-right-radius: 50px;

实现如下效果

再利用transfrom变换 得到如下,再进行交叠组成。

tip:合理地利用伪元素以及css border-radius属性以及transform变换属性

 二. 饼图

即使是最简单的只有两种颜色的形式,用Web技术创建也并不简单

尽管这个东西并不像它曾经看起来那么难以实现,但是也没有什么直接并且简单的方法。但是,现在已经有很多更好、更易于维护的方式来实现它

  1. .pie{
  2. width:50px;
  3. height:50px;
  4. position:relative;
  5. background: linear-gradient(90deg,#eee 50%,green 0);
  6. border-radius:50%
  7. }

第一步:先画一个圆(饼图特效颜色为 green)

第二步:利用伪元素添加一个蒙版

  1. .pie::before{
  2. position:absolute;
  3. content:'';
  4. width:50%;
  5. height:100%;
  6. background: #eee;
  7. /* 当饼图比例大于一半的时候 */
  8. /* background: green; */
  9. border-radius:50px 0 0 50px;
  10. }

第三步:利用transform的变换 改变角度,实现自己需要的角度

  1. transform:rotate(20deg);
  2. transform-origin:100% 50%;

     

注:伪元素的旋转变换中心应该设置为圆心

结束语

  暂时先说明了两个图形,都是采用CSS或者部分采用了CSS3的属性制作出来的,大家还可以点击CSS3- Tricks 提供的《The Shapes of CSS》里面展示了十多种图形的制作方法。由于部分图形效果使用了CSS3的部分属性,所以在ie的效果可能无法显示。使用css制作三角和圆有效果应用还是很多了,特别是用来制作tips效果

利用CSS制作图形效果的更多相关文章

  1. 纯CSS制作图形效果

    下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  3. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  4. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  5. 一种巧妙的使用 CSS 制作波浪效果的思路

    在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...

  6. 利用CSS制作脸书

    很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...

  7. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  8. 利用CSS制作三角形

    在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果.   首先,我们来定义一个 ...

  9. 利用css制作带边框的小三角

    标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

随机推荐

  1. 关于工作流引擎ccflow待办分类 研究与技术实现

    关于工作流引擎待办分类 研究与技术实现 关键字:工作流引擎 BPM系统 待办类型 名词:待办 概要介绍:待办就是当前的登录人员要处理的工作,在工作流程里面的节点类型不同,业务场景不同,我们把待办分为如 ...

  2. 深入理解static关键字

    class A{ public int i = 10; public void show(){ System.out.printf("%d",i); } } class M{ pu ...

  3. HDU 1848 Fibonacci again and again SG函数做博弈

    传送门 题意: 有三堆石子,双方轮流从某堆石子中去f个石子,直到不能取,问先手是否必胜,其中f为斐波那契数. 思路: 利用SG函数求解即可. /* * @Author: chenkexing * @D ...

  4. Numbers That Count POJ - 1016

    "Kronecker's Knumbers" is a little company that manufactures plastic digits for use in sig ...

  5. yzoj1985 最长公共单调上升子序列 题解

    题面给两个序列a,b长度分别为n,m求最长公共上升子序列,百度了一下求公共子序列的问题好像叫做LCS,而上升的叫做LCIS.都是dp的例题. 先来说说最长公共子序列,这是一道比较经典的dp题,我们可以 ...

  6. Jmeter 之 逻辑控制器 if 控制器

    最近工作不忙,利用空闲时间整理了下Jmeter的相关知识,下面给大家分享下Jmeter中 如果(if)控制的使用和应用. 如下图:线程组 > 添加 > 逻辑控制器 > 如果 (if) ...

  7. STM32F 系列单片机 调试记录

    1.RTC 配置 调一个 RTC,刚开始运行都正常,设置的时间跟读出的时间一样.但是换了一个芯片出现读出的年不对的情况,调试才发现是RTC设置的时候有些参数漏掉没填导致的. T_S32 DRIVER_ ...

  8. [币严区块链]ETH搭建节点区块数据同步的三种模式:full、fast、light

    ETH  全节点Archive(归档)模式数据量增长图 上述图表可通过链接查看:https://etherscan.io/chartsync/chainarchive 通过上表,可以看到截止2019年 ...

  9. 利用github搭建私人maven仓库

    一.背景 最近在做HBase的项目,不免会引用到一些工具类,如StringUtils,NumberUtils,DateUtils这些,公司底层有封装好可以直接使用. 但是项目完成,用maven打包部署 ...

  10. Git客户端下载

    链接:http://pan.baidu.com/s/1eRXsITO 密码:4i6e