CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在图形绘制中的创新使用。
- CSS3 在网页设计中的20佳惊艳应用
- 推荐12个漂亮的 CSS3 按钮实现方案
- 推荐10个非常优秀的 CSS3 开发工具
- 分享50个漂亮的 CSS3 最佳应用示例
- 24款非常实用的 CSS3 工具终极收藏
Egg
#egg {display:block;width: 126px;height: 180px;background-color: red;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Pac-Man
#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid red;border-left: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;
}
Talk Bubble
#talkbubble {width: 120px;height: 80px;background: red;position: relative;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
}
#talkbubble:before {content:"";position: absolute;right: 100%;top: 26px;width: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;
}
12 Point Burst
#burst-12 {background: red;width: 80px;height: 80px;position: relative;text-align: center;
}
#burst-12:before, #burst-12:after {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;
}
#burst-12:before {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);
}
#burst-12:after {-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);-ms-transform: rotate(60deg);-o-transform: rotate(60deg);
}
8 Point Burst
#burst-8 {background: red;width: 80px;height: 80px;position: relative;text-align: center;-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transform: rotate(20eg);
}
#burst-8:before {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);
}
- 35个让人惊讶的 CSS3 动画效果演示
- Web 前沿:一组极其绚丽的 CSS3 效果
- Web 前沿:那些让人惊叹的 CSS3 应用
- 十款精心挑选的在线 CSS3 代码生成工具
- 年度盛宴:2012年最精彩的 CSS3 教程
本文链接:CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
转载于:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes-c.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 ...
最新文章
- pandas读写结构化数据(read_csv,read_table, read_excel, read_html, read_sql)
- 更改centos 5 yum源
- mysql用户权限设置
- UA MATH563 概率论的数学基础1 概率空间2 可列状态空间
- 【BZOJ1934】善意的投票(网络流)
- java 企业信息门户 拖拽排版_web中拖拽排序与java后台交互实现
- [css] 请问class与[class=xxx]的区别是什么?两者是否等价?
- 十五、MySQL变量(系统变量、自定义变量)相关知识总结
- tomcat 多项目多HOST配置
- abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二)
- JsonCpp常见用法
- java中改变文本字体和大小_Java实训——编写一个窗体程序,可以对文本区中的文字设置字体和大小。...
- 2060显卡驱动最新版本_堪比显卡界中的小米,价格屠夫,1999的铭瑄RTX2060终结者体验...
- C++中实现调用外部程序的方法
- HR看完这种简历就崩溃?真相是这样的!
- springboot的最核心的27个注解详解
- css3变形 transform中复合写法的注意问题总结
- 保研面试/考研复试线性代数问题整理
- 2017年小老虎软考辅导视频访问量备忘录
- 利用vscode高效阅读《You Don't Know JS》