CSS3特殊图形制作

现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了。废话不多说,现在开始用CSS3画图

1、心型

//HTML

<div class="box"></div>
//css3

<style>
.box{
position: relative;
width: 160px;
height: 160px;
border: 1px solid red;
}
.box:before{
position: absolute;
left: 20px;
width: 80px;
height: 120px;
content: '';
background: #f00;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
}
.box:after{
position: absolute;
left: 48px;
top: 0px;
width: 80px;
height: 120px;
content: '';
background: #f00;
border-radius: 100px 100px 0 0;
transform: rotate(45deg);
}
</style>

2、太极符

//HTML

<div class="box"></div>

//CSS3
<style>
.box{
position: relative;
width: 96px;
height: 48px;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
background: #fff;
border-radius: 100%;
}
.box:before{
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
border: 18px solid #000;
background: #fff;
content: '';
border-radius: 100%;
}
.box:after{
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border: 18px solid #fff;
background: #000;
content: '';
border-radius: 100%;
}
</style>

3、扇形

//html

<div class="box"></div>
//css3
<style>
.box{
width: 0;
height: 0;
border: 60px solid yellow;
border-color: yellow transparent yellow yellow;
border-radius: 60px;
}
</style>

CSS3特殊图形制作的更多相关文章

  1. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  3. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  4. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  5. 用css3和jQuery制作精美的表单

    用css3和jQuery制作一个简单的精美表单 html代码如下: <span class="title">Mask Your Input Forms and Make ...

  6. react使用引入svg的icon;svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  7. CSS3按钮效果制作

    CSS3按钮效果制作 首先附上效果图,按下去有一种下沉的效果, 未按效果 按下去效果 原理:第一个按钮相对比较简单,就直接是一个双重阴影效果,然后鼠标按下去让他的margin-top值为-3px,阴影 ...

  8. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  9. css3三角形冒泡泡图形制作

    图一: 图二: <!DOCTYPE html> <html> <head> <title>css 三角形</title> <style ...

随机推荐

  1. oracle中sqlldr工具使用时注意事项

    1.命令写在一行:如,sqlldr sh/&sh_pass@&connect_string control=&ctl_file data=&dat_file log=& ...

  2. 《机器学习实战》——k-近邻算法Python实现问题记录(转载)

    py2.7 : <机器学习实战> k-近邻算法 11.19 更新完毕 原文链接 <机器学习实战>第二章k-近邻算法,自己实现时遇到的问题,以及解决方法.做个记录. 1.写一个k ...

  3. redis+node.js

    1.什么的cache 是一种更快的记忆存储数据集 存储空间有限 储存一部分重要数据 是一种相对的概念,只要比原本数据存储更快的介质就能作为cache 2.caching 策略 有限的存储空间,只能存储 ...

  4. Vim使用技巧(1) -- 普通模式技巧 【持续更新】

    直观的来一张键盘图先 符号快捷键 . //重复上次修改 ^ //光标快速跳转到当前行开头 $ //光标快速跳转到当前行结尾 f{char} //光标快速跳转到当前行下一个{char}字符,{char} ...

  5. 【JMeter4.0学习(九)】之定时器

    目录: 固定定时器 高斯随机定时器 附 一.固定定时器 1.添加线程组 2.添加固定定时器 3.添加HTTP请求 4.添加结果树以及运行  二.高斯随机定时器 1.添加线程组 2.添加高斯随机定时器 ...

  6. 九度OJ 1347:孤岛连通工程 (最小生成树)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1522 解决:314 题目描述: 现在有孤岛n个,孤岛从1开始标序一直到n,有道路m条(道路是双向的,如果有多条道路连通岛屿i,j则选择最短 ...

  7. OC常用函数及变量

    1.OC常用的的函数及变量 (1)算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; ...

  8. phpstorm+xdebug, 实现断点调试: xdebug如何配置

    [XDebug] xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug" xdebug.trace_output_dir=" ...

  9. Java基础 - 标识符

    标识符就是用来给包,类,方法变量等起名字的符号 组成规则: A:unicode字符 数字字符,英文大小写字母,汉字(不建议使用汉字) B:下划线 _ C:美元符 $ 注意事项: A:不能以数字开头 B ...

  10. CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...