CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在图形绘制中的创新使用。
- 35个让人惊讶的 CSS3 动画效果演示
- Web 前沿:一组极其绚丽的 CSS3 效果
- Web 前沿:那些让人惊叹的 CSS3 应用
- 十款精心挑选的在线 CSS3 代码生成工具
- 年度盛宴:2012年最精彩的 CSS3 教程
Yin Yang
#yin-yang {width: 96px;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 50px 2px;border-radius: 100%;position: relative;
}#yin-yang:before {content: "";position: absolute;top: 50%;left: 0;background: #eee;border: 18px solid red;border-radius: 100%;width: 12px;height: 12px;
}#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius:100%;width: 12px;height: 12px;
}
Badge Ribbon
#badge-ribbon {position: relative;background: red;height: 100px;width: 100px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;
}#badge-ribbon:before,
#badge-ribbon:after {content: '';position: absolute;border-bottom: 70px solid red;border-left: 40px solid transparent;border-right: 40px solid transparent;top: 70px;left: -10px;-webkit-transform: rotate(-140deg);-moz-transform: rotate(-140deg);-ms-transform: rotate(-140deg);-o-transform: rotate(-140deg);
}#badge-ribbon:after {left: auto;right: -10px;-webkit-transform: rotate(140deg);-moz-transform: rotate(140deg);-ms-transform: rotate(140deg);-o-transform: rotate(140deg);
}
Space Invader
#space-invader{box-shadow:0 0 0 1em red,0 1em 0 1em red,-2.5em 1.5em 0 .5em red,2.5em 1.5em 0 .5em red,-3em -3em 0 0 red,3em -3em 0 0 red,-2em -2em 0 0 red,2em -2em 0 0 red,-3em -1em 0 0 red,-2em -1em 0 0 red,2em -1em 0 0 red,3em -1em 0 0 red,-4em 0 0 0 red,-3em 0 0 0 red,3em 0 0 0 red,4em 0 0 0 red,-5em 1em 0 0 red,-4em 1em 0 0 red,4em 1em 0 0 red,5em 1em 0 0 red,-5em 2em 0 0 red,5em 2em 0 0 red,-5em 3em 0 0 red,-3em 3em 0 0 red,3em 3em 0 0 red,5em 3em 0 0 red,-2em 4em 0 0 red,-1em 4em 0 0 red,1em 4em 0 0 red,2em 4em 0 0 red;background: red;width: 1em;height: 1em;overflow: hidden;margin: 50px 0 70px 65px;}
TV Screen
#tv {position: relative;width: 200px;height: 150px;margin: 20px 0;background: red;border-radius: 50% / 10%;color: white;text-align: center;text-indent: .1em;
}
#tv:before {content: '';position: absolute;top: 10%;bottom: 10%;right: -5%;left: -5%;background: inherit;border-radius: 5% / 50%;
}
Chevron
#chevron {position: relative;text-align: center;padding: 12px;margin-bottom: 6px;height: 60px;width: 200px;
}#chevron:before {content: '';position: absolute;top: 0;left: 0;height: 100%;width: 51%;background: red;-webkit-transform: skew(0deg, 6deg);-moz-transform: skew(0deg, 6deg);-ms-transform: skew(0deg, 6deg);-o-transform: skew(0deg, 6deg);transform: skew(0deg, 6deg);
}
#chevron:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 50%;background: red;-webkit-transform: skew(0deg, -6deg);-moz-transform: skew(0deg, -6deg);-ms-transform: skew(0deg, -6deg);-o-transform: skew(0deg, -6deg);transform: skew(0deg, -6deg);
}
Magnifying Glass
#magnifying-glass
{font-size: 10em; /* This controls the size. */display: inline-block;width: 0.4em;height: 0.4em;border: 0.1em solid red;position: relative;border-radius: 0.35em;
}
#magnifying-glass::before
{content: "";display: inline-block;position: absolute;right: -0.25em;bottom: -0.1em;border-width: 0;background: red;width: 0.35em;height: 0.08em;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);
}
- CSS3 在网页设计中的20佳惊艳应用
- 推荐12个漂亮的 CSS3 按钮实现方案
- 推荐10个非常优秀的 CSS3 开发工具
- 分享50个漂亮的 CSS3 最佳应用示例
- 24款非常实用的 CSS3 工具终极收藏
本文链接:CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
转载于:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes-d.html
CSS 魔法系列:纯 CSS 绘制各种图形《系列六》相关推荐
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- [css] 怎样用纯CSS实现禁止鼠标点击事件?
[css] 怎样用纯CSS实现禁止鼠标点击事件? pointer-events: none; 是css3新出现的属性,意思就是禁止鼠标点击事件,当元素中有这一属性时,链接.点击事件统统失效. 个人简介 ...
- html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
- 气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
- html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
- html图片倒角,CSS实例:纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
- css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子 今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序 心急的同学,先看效果,我放在codepen上. ...
- 查看全文的css,如何通过纯CSS实现“点击展开全文”功能
看标题大家不难猜到我今天要实现的功能,正如你打开 HTML代码 这是前端开发博客的正文 点击展开全文 将上述代码加入到 single.php 文件里面,按钮一般命名为"点击展开全文" ...
- css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码 纯css实现wif ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
最新文章
- CodeGen标记循环
- FATFS文件系统框架及源码分析
- mflac文件解析工具_9 个爱不释手的 JSON 工具
- linux 查看可执行文件动态链接库相关信息(转)
- bootstrap按钮的边框问题 去除
- 应用层协议:HTTP与HTTPS协议详解、二者的区别
- matlab处理亮度不均匀,校正亮度不均匀问题并分析前景对象
- Nginx限制连接数和下载速度
- python爬淘宝评论_python爬虫实例,一小时上手爬取淘宝评论(附代码)
- ubuntu生成pem证书连接服务器(已验证)
- 专业的CMMI3认证咨询公司告诉你从CMMI3升到CMMI5级有哪些优势?
- 如何用python爬取公众号文章搜狗微信搜索_基于搜狗微信搜索的微信公众号爬虫 – we......
- Hadoop相关概念
- 程序员月薪25000,很可能会掉进这个陷进了!
- 《从0到1 开启商业与未来的秘密》阅读心得
- From Nand to Tetris Week2 2021 超详细笔记
- java jar 包启动程序指定代理
- 移动OA,颠覆企业传统助力办公更高效
- 逻辑漏洞之密码找回漏洞(semcms)
- 2022初级会计实务教材读书笔记