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>

转载于:https://www.cnblogs.com/yz-blog/p/6604983.html

CSS3特殊图形制作相关推荐

react使用引入svg的icon；svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
20个很酷的CSS3导航菜单制作教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 ...
用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单 html代码如下: <span class="title">Mask Your Input Forms and Make ...
css图形动画,CSS3 实现图形下落动画效果
先看效果实现代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: auto; bac ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
2020.10.22--AI--立体图形制作、矛盾空间图形设计、3D文字
立体图形制作 1.先用矩形工具画出一个矩形,填充颜色,然后用直接选择工具选住左边的两个角,给它向上移动 2.把图进行复制对称,然后对齐 3.把图形选住点右键编组,进行复制,然后旋转对称,编组 4.把图 ...
html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS
CSS3 filter(滤镜) 制作图片高斯模糊无需JS 这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽的一B!!!起 ...
干货分享 | 代谢组学数据分析，常见图形制作分享-百趣生物
前两期<代谢组学两种常见图形制作分享>.<代谢组学常见图形制作分享(二)>给大家详细介绍了韦恩图.箱线图和ROC曲线的绘制,不知各位趣粉学得如何啦?今天BIOTREE生信分析的 ...
html5显示状态灯,如何使用css3+html5来制作文字霓虹灯效果
使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画,且文字选中时也有很酷的动画特效: 文字可动态输入,且输入的文字实时渲染霓虹灯特效. 使用css3+html5来制作文字霓虹 ...
【实战HTML5与CSS3】免费制作威客页面啦（附源码）
[实战HTML5与CSS3]免费制作威客页面啦(附源码) 原文 http://www.cnblogs.com/yexiaochai/archive/2013/05/05/3060770.html 前言 ...

CSS3特殊图形制作

CSS3特殊图形制作

CSS3特殊图形制作相关推荐

最新文章

热门文章