利用CSS制作图形效果
前言
关于如何使用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制作图形效果的更多相关文章
- 纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- 一种巧妙的使用 CSS 制作波浪效果的思路
在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...
- 利用CSS制作脸书
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 利用CSS制作三角形
在我们看到类似于这样的图片时: 我们一般都会想,哎,这还不简单,用一张图片就可以了. 的确,用图片可以很轻松地做到.不过我们接下来要讨论的是: 如何用css也作出这样的效果. 首先,我们来定义一个 ...
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
随机推荐
- 【Linux命令】modprobe命令
modprobe(module probe)命令 用于自动处理可载入模块. 1)语法 modprobe [-acdlrtvV][--help][模块文件][符号名称 = 符号值] 2)补充 modpr ...
- 选择排序&冒泡排序&折半查找
//选择排序 void test2(int a[],int len){ //每次找出一个最小值,最小值依次与原数组交换位置,通过下标来完成交换,最小值下标每次都在变,变量存储 // 假如第一个是 ...
- H-Magic Line_2019 牛客暑期多校训练营(第三场)
题目连接: https://ac.nowcoder.com/acm/contest/883/H Description There are always some problems that seem ...
- cogs2823求组合数(lucas定理
http://cogs.pro:8080/cogs/problem/problem.php?pid=vNQJJVUVj 再写个数学水题,其实lucas适用于m,n比较大而p比较小的情况. 题意:给出两 ...
- codeforces 814 D. An overnight dance in discotheque (贪心+bfs)
题目链接:http://codeforces.com/contest/814/problem/D 题意:给出奇数个舞者,每个舞者都有中心坐标和行动半径,而且这些点组成的园要么相互包含要么没有交集求,讲 ...
- 【Offer】[17] 【打印1到最大的n位数】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 思路分析 要考虑到大数问题, ...
- 使用FreePBX和第三方线路对接
首先搭建好相关环境 在FreePBX的web-gui控制界面进行操作. 通信接口连接--->中继 先创建一条中继线路: 创建中继 设置这条线路 优先级为0 中继名: 设置一个名字 Outgoi ...
- PHP如何解决表单重复提交
利用session 表单隐藏域中存放session(表单被请求时生成的标记).采用此方法在接收表单数据后,检查此标志值是否存在,先进行删除,然后处理数据; 若不存在,说明已提交过,忽略本次提交. ...
- 利用HBuilder打包Vue开发的webapp为app
众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的, ...
- 自荐RedisViewer一个有情怀的跨平台Redis可视化客户端工具
自荐一个有情怀的跨平台Redis可视化客户端工具--RedisViewer 转载自 最美分享Coder 2019-09-17 06:31:00 介绍 在以往的文章中曾经介绍过几款Redis的可视化工具 ...