好程序员web前端学习路线分享纯css绘制各种图形
好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形、矩形、圆形、椭圆形、对话泡泡等,让整个页面看起来不会太单调。作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够。那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形、正方形、圆形、椭圆,其实不然,强大的css不仅可以绘制出基本的图形,还可以绘制一些比较复杂一些的比如爱心、钻石、太极八卦、对话泡泡等。这些效果的实现,会用到CSS3的相关属性,大家都知道css3属性对于浏览器的兼容不是很好,所以我希望模仿这些效果的时候,可以用Chrome和firefox浏览器打开,虽然IE也可以看到部分效果,但是为了更好的视觉体验,还是不要用IE去看了,好了,废话不多说,来一起看看CSS绘制的那些图形吧。1、 向上三角形
CSS核心代码 .triangle-up { width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }2、 左上三角形
CSS核心代码.triangle-topleft { width: 0; border-top: 100px solid red; border-right: 100px solid transparent;}3、 弧形尾箭头
CSS核心代码 .curvedarrow { position: relative; width: 0; border-top: 90px solid transparent; border-right: 90px solid red; transform: rotate(10deg) translateX(100%); } .curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 30px solid red; border-radius: 200px 0 0 0; top: -120px; left: -90px; width: 120px; height: 120px; transform: rotate(45deg); }4、 吃豆人
CSS核心代码: .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; }5、 带尖角的说话泡泡
CSS核心代码: .talkbubble { width: 120px; height: 80px; background: red; position: relative; border-radius: 10px; } .talkbubble:before { content: ""; position: absolute; right: 100%; top: 26px; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }6、bilibili电视机
CSS核心代码 .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%; }7、放大镜
.magnifying-glass { font-size: 10em; 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; transform: rotate(45deg);}8、长长的指向图形
CSS核心代码:.pointer { width: 200px; height: 40px; position: relative; background: red;}.pointer:after { content: ""; position: absolute; left: 0; bottom: 0; border-left: 20px solid white; border-top: 20px solid transparent; border-bottom: 20px solid transparent;}.pointer:before { content: ""; position: absolute; right: -20px; bottom: 0; border-left: 20px solid red; border-top: 20px solid transparent; border-bottom: 20px solid transparent;} 最后还是要跟小伙伴们强调一下,由于部分图形效果使用了CSS3的部分属性,如果你还在使用IE的话,我建议你使用现代浏览器,比如:Mozilla Firefox、Google Chrome、Safari、Opera。上面展示的效果可能部分实用性不大,但是使用css制作三角和圆有效果应用还是很多了,特别是用来制作tips效果。
- 好程序员web前端学习路线分享前端基础面试题
- 好程序员web前端学习路线分享滚动穿透方法
- web前端开发学习课程大纲路线图及学习方法分享
- 好程序员web前端学习路线解答前后端对接问题
- 好程序员web前端分享12个CSS高级技巧汇总
- web前端学习资料哪里有?web前端学习路线分享
- 好程序员web前端分享JavaScript学习指南
- web前端开发学习经验分享——css,js入门篇
- web前端开发学习经验分享——css,js进阶篇
- web前端开发学习经验分享——css,js入门篇
- 好程序员web前端教程分享CSS元素类型
- java web 前端学习路线
- web前端开发学习-css,js
- web前端学习笔记(CSS盒子的定位)
- 如何零基础web(网页)前端学习路线?
- web前端分享HTML5中的nav标签学习笔记
- web前端学习资源分享
- 好程序员web前端教程分享三大前端框架相关问题
- 好程序员大数据学习路线分享Scala分支和循环
- 【CSS】绘制各种图形实例