前言

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

 

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

一.  实现一个心形

#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before{
position: absolute;
content: "";
left: 50px;
top:;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
-webkit-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:;
position: absolute;
content: "";
top:;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
-webkit-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: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

效果

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

border-radius: 50px 50px 0 0;
/* 等价于 */
border-top-left-radius: 50px;
border-top-right-radius: 50px;

实现如下效果

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

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

 二. 饼图

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

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

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

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

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

.pie::before{
position:absolute;
content:'';
width:50%;
height:100%;
background: #eee;
/* 当饼图比例大于一半的时候 */
/* background: green; */
border-radius:50px 0 0 50px;
}

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

  transform:rotate(20deg);
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. NLP(六) 分块、句法分析、依存分析

    内置分块器 分块:从文本中抽取短语 import nltk text = 'Lalbagh Botanical Garden is a well known botanical garden in B ...

  2. Vim高手,从来不用鼠标2——替换、撤销、缩进、查找

    本文章原创首发于公众号:编程三分钟 vim 替换.撤销.缩进.查找 上一次我们掌握了移动.跳转.定位.操作(删除.复制.粘贴),基本使用vim脱离鼠标完全是可以做到的了.速记如下: 移动: h,l,j ...

  3. Codeforces Round #506 (Div. 3) 1029 F. Multicolored Markers

    CF-1029F 题意: a,b个小正方形构造一个矩形,大小为(a+b),并且要求其中要么a个小正方形是矩形,要么b个小正方形是矩形. 思路: 之前在想要分a,b是否为奇数讨论,后来发现根本不需要.只 ...

  4. codeforces 877 E. Danil and a Part-time Job(线段树(dfs序))

    题目链接:http://codeforces.com/contest/877/problem/E 题解:显然一看就感觉要么树链剖分要么线段树+dfs序,题目要求的操作显然用线段树+dfs序就可以实现. ...

  5. CF934A A Compatible Pair

    A Compatible Pair time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. Spring的事件监听机制

    最近公司在重构广告系统,其中核心的打包功能由广告系统调用,即对apk打包的调用和打包完成之后的回调,需要提供相应的接口给广告系统.因此,为了将apk打包的核心流程和对接广告系统的业务解耦,利用了spr ...

  7. ASP.NET MVC实现依赖注入

    在java的spring中有自动注入功能,使得代码变得更加简洁灵活,所以想把这个功能移植到c#中,接下来逐步分析实现过程 1.使用自动注入场景分析 在asp.net mvc中,无论是什么代码逻辑分层, ...

  8. python中列表,数字,字符串函数总结

    列表list: arr = [] 1.可以定义空列表 2.可以定义只有一个元素的列表 3.元素可以是任意类型 arr.append('abc')末尾添加 arr.insert(index,objec) ...

  9. 纯css制作电闪雷鸣的天气图标

    效果 效果图如下 ​ 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌 ...

  10. CSAPP DataLab

    注意不同版本的题目可能会有所不同,搜了很多他们的题目和现在官网给的实验题都不一样,自己独立思考完整做一遍顺便记录一下. PS:这些难度为1的题有的说实话我都做了挺久的,不过完整做一遍感觉很有意思,这些 ...