线性箭头用css3,css3实现小箭头各种图形效果
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%;
}
到此这篇关于css3实现小箭头各种图形效果的文章就介绍到这了,更多相关css 小箭头 内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!
线性箭头用css3,css3实现小箭头各种图形效果相关推荐
- 【AS3代码】隐藏原有鼠标箭头,并自定义鼠标小箭头
package { import flash.display.Sprite; import flash.events.Event; import flash.ui.Mouse; ...
- 小程序--显示图形效果
//运用for循环嵌套循环知识 class Alhh{ public static void main(String[] args){ for(int i=0;i<5;i++){//控制行数 f ...
- 去除桌面快捷方式上的小箭头
电脑桌面上默认快捷方式左下角是有个小箭头的.很多用户可能不习惯快捷方式小箭头.那怎么去掉呢? 方式一 1.新建一个TXT文档(文档的名称自己顺便命名即可),然后把下面的这些英文全部复制到TXT文档内保 ...
- css3实现小图标向下引导小箭头动态效果
css3实现小图标向下引导小箭头动态效果 网上转的 ,记录下来,方便下次用到 <!DOCTYPE html> <html><head><meta charse ...
- 一个select元素自定义设计的新思路:appearance: none之后利用符号制造小箭头
最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分. 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终 ...
- input输入框为number类型时,去掉上下小箭头
input输入框type为number时,去掉上下小箭头,方式如下: <input type="number" ...><style>/* 在Chrome浏 ...
- 用CSS写出一个下拉菜单小箭头
向右小箭头 width: 13px; height: 13px; border: 1px solid #0F1520; border-top: none; border-left: none; tra ...
- 如何处理Android Studio 上面关于 update 和 commit 小箭头的消失
问题: android studio 在关联 SVN 或者 git 服务后,会在工具栏出现 update 和 commit 小箭头 如图: 但是,有时你打开工程的时候,发现这两个小箭头却消失不见了 如 ...
- listview 每行后面的小箭头_几个简单而有用的电脑小知识
1: 怎么用批处理文件删除桌面快捷菜单的小箭头? A:在电脑记事本中,复制以下内容并保存为.bat 后缀名文件,保存在桌面双击运行即可 清除快捷菜单的小箭头! @ECHO OFF reg delete ...
最新文章
- 【Cson原创】javascript中length属性的探索
- 10 个 GitHub 上超火和超好看的管理后台模版,后台管理项目有着落了
- 求数组中元素为另外两个元素和的最大元素
- 一、Delphi 2009 中的泛型
- UI1_UIView层操作
- java ajax返回数组_js对ajax返回数组的处理介绍
- 浅谈分布式存储系统的数据分布算法
- 在windows server 2003服务器上提供NTP时间同步服务
- linux下安装Firefox
- ASP.NET的页面生存周期 [转]
- Jquery 对象求和
- 蓝鹰立德的SAP解决方案开启飞马模式(FMEA)
- ant design pro 实现审核图片盖章功能
- 睡眠多少分钟一个循环_睡眠分多少阶段
- C语言数据结构——队列
- 拿姐姐身份证登记结婚竟然成了!婚姻户籍信息共享难在哪儿
- 《黑客帝国 THE MATRIX》——当你生活在代码的虚拟世界中
- Houdini实现AO效果
- 计算机专业考研还是不考研?这才是本质区别!
- [原创]插卡路由器对接openwrt对接国内节点 手机免流通过USB口共享流量给路由器教程
热门文章
- chrome 清空network_Chrome DevTools——Network篇
- 【区块链】区块链经济学:制度加密经济学入门指南
- 实验室-NO.2 python 读取3D obj文件 + 特征点显示 + 凹凸点分类
- android pad版本 yy,YY直播 在IOS端、Android端以及WEB端区别。
- 被傅里叶变换,劝退的著名学科导师
- 半导体相关专业英语(1)
- python做圆柱绕流_OpenFOAM-圆柱绕流
- PPT 输出图片DPI修改
- iPhone 12 销量破亿,直追「钉子户神机」的底气是什么?
- 20210416 东南大学校庆论文格式 笔记