黑松山资源网 Design By www.paidiu.com
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是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
- 在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。
- 在CSS2中,border-color也开始接受transparent作为参数值。
- 在CSS3中,transparent被延伸到任何一个有color值的属性上。
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%; }
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路
- EA称AI是其业务核心!能提高开发效率、节约成本
- 卫华.1990-太阳升【BMG】【WAV+CUE】
- 呼吸乐队.1992-THEBREATHING【深飞】【WAV+CUE】
- 李玟.2008-1994-2008豪华典藏精选2CD【SONY】【WAV+CUE】
- 《张学友 再现歌神的光辉岁月 梦想成真 2CD》[WAV/分轨][1.2GB]
- 《海来阿木 高音测试王》[WAV+CUE][500MB]
- 《许巍 歌声给你生命的力量 珍藏许巍 3CD》[WAV/分轨][2GB]
- 《直到黎明重制版》配置要求推荐
- 《赛博朋克2077》2.13版本更新内容一览
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览