css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现。
最常用的就是用css实现的小三角了
#triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-bottom:50px solid red;} #triangle-down { display:inline-block; width:0; height:0; border-left:30px solid transparent; border-right: 30px solid transparent; border-top:50px solid red;} #triangle-left { display:inline-block; width:0; height:0; border-top: 30px solid transparent; border-right: 50px solid red; border-bottom: 30px solid transparent;} #triangle-right{ display:inline-block; width:0; height:0; border-top: 30px solid transparent; border-left: 50px solid red; border-bottom: 30px solid transparent;}
#triangle-topleft { display:inline-block; width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; } #triangle-topright { display:inline-block; width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; } #triangle-bottomleft { display:inline-block; width: 0; height: 0; border-bottom: 50px solid red; border-right: 50px solid transparent; } #triangle-bottomright { display:inline-block; width: 0; height: 0; border-bottom: 50px solid red; border-left: 50px solid transparent; }
通过这样的小箭头在项目中我们可以实现验证提示层箭头这样的样式,非常的实用,再也不用为提示层样式发愁啦。
我们看到了实现css小箭头的style样式中都用到了transparent这样的一个属性,transparent到底是什么意思?于是查看了css参考手册,定义是:
用来指定全透明色彩。
transparent我总结意思就是透明,无颜色的。
看图,三角形的实现实际上是一个宽度和高度都为0的div的四个边框实现的,如果我们要实现朝下的箭头,那就要让div的左~右 边框都为透明(透明但左右边框还占位置)。
左上箭头 实现思路是什么呢?div的右边框和底部边框都为透明,这样左上角的箭头就露出来了。
css3实现心形
#heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
到此这篇关于css3实现小箭头各种图形效果的文章就介绍到这了,更多相关css 小箭头 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
打开你的dreamweaver,然后你可以看到界面上有三种新建站点的方法,如下图,这三...
效果:标题自带序号,代码块配色,代码块左上角仿mac图标 先打开主题文件夹 文件...
!--[if IE 6] 仅IE6可识别 ![endif]--条件注释判断浏览器.!--[if IE] 所有的IE可...
我们今天共同学习一下CSS Alpha透明相关的知识。 关于CSS Alpha透明的相关知识。...
在最新的 Chrome Canary 中,一个有意思的 CSS 语法 Container Queries 得到了支...
什么是 DNS Prefetch DNS 实现域名到IP的映射。通过域名访问站点,每次请求都要...
去年,以《堡垒之夜》开发商 Epic Games、Spotify Technology、Match Group(Tin...
Java synchronized 关键字 可以将一个代码块或一个方法标记为同步代码块。同步代...
效果: 代码: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
假定有二个BOX,我们需要它的最小高度为150PX。 CSS div.box1,div.box2{ width: ...