CSS-border属性制作小三角
1——三角向上下左上、右上、右下、左下这四个方向突出的样式
向左上角突出:
border-color: transparent transparent transparent #FFCC00;
border-style:dashed dashed solid solid;
border-width: 0 0 30px 30px ;
向右上角突出:
border-color: #FFCC00 transparent transparent transparent;
border-style:solid dashed dashed solid;
border-width: 30px 0 0 30px;
:如下代码显示,
border-color:transparent #FFCC00 transparent transparent;
border-style:solid solid dashed dashed;
border-width:30px 30px 0 0 ;
向左下角突出:
border-color: transparent transparent #FFCC00 transparent;
border-style:dashed solid solid dashed;
border-width: 0 30px 30px 0;
---------------------------------------------分割--------------------------------------------------
2——三角向上下左右四个方向正中间的样式
:如下代码显示,
border: 20px solid #FFCC00;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
(ps:同样的效果,减少代码的写法:
:代码:
border: 20px solid transparent;
border-left-color: #776ee2;
)
四个都有颜色,
border-color:#b182e9 #60c69d #e37076 #776ee2;
border-style:solid;
border-width:30px;
3:其他好玩的尝试:
border-color: transparent #e37076 #776ee2 #e37076;
border-style:dashed solid solid solid;
border-width: 0 30px 30px 30px ;
左上右下
border-color: transparent transparent #776ee2 #e37076;
border-style:dashed dashed solid solid;
border-width: 0 0 30px 30px ;
(ps:相同的效果,不同的代码书写:
border-color:#776ee2 #FFCC00 transparent transparent;
border-style:solid solid dashed dashed;
border-width:30px 30px 0 0;)
右上左下
border-color:transparent #776ee2 #e37076 transparent;
border-style:dashed solid solid dashed;
border-width:0 30px 30px 0;
,F12后这是结构图:
,就右下角一小块的变色——代码如下:
- border-style: solid;
- border-width: 0 0 10px 10px;
- border-color: transparent transparent #ffffff transparent;
CSS-border属性制作小三角的更多相关文章
- css border属性做小三角标
<!doctype html><html> <head> <title></title> <meta charset="ut ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- 用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...
- css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows
不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- css直接写出小三角
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...
- CSS border 属性和 border-collapse 属性
border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 ...
随机推荐
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
从供应商手中接手一个云平台(Windwos Azure)上的MySQL数据库,登录数据库时遇到错误: $mysql -uroot -p Enter password: ERROR 2002 (HY00 ...
- ORACLE调整SGA_TARGET值耗费时间长案例
在一数据库版本为(标准版)Oracle Database 10g Release 10.2.0.4.0 - 64bit Production 的服务器上调整 sga_target时,遇到命令执行了非常 ...
- 使用Navicat连接Oracle数据时的一些问题,连接时错误:ORA-28547,新建用户后连接时错误:ORA-01017
发现Navicat作为一款连接数据库的工具确实很好用,可视化的界面看着舒服很多,下面说说我今天在连接Oracle数据库时的一些问题: 1.安装好Oracle后直接用Navicat是连接不上的,会出现如 ...
- SQL Server自动化运维系列——监控跑批Job运行状态(Power Shell)
需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 在上一篇文章中已经分析了SQL SERVER中关于邮 ...
- Python写地铁的到站的原理简易版
Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这 ...
- springmvc和struts2的区别
springmvc和struts2的区别 1.springmvc基于方法开发的,struts2基于类开发的. 2.单例和多例的区别:springmvc在映射的时候,通过形参来接收参数的,是将url和c ...
- android setDestinationInExternalPublicDir 下载到SD卡根目录
一:setDestinationInExternalPublicDir(“Trinea”, “MeiLiShuo.apk”);表示设置下载地址为sd卡的Trinea文件夹,文件名为MeiLiShuo. ...
- 报表开发之批量导入导出excel
在日常使用报表过程中,会有这样一种情况,你将Excel表分发给各个员工,员工填完后,统一整理成多个Excel,你需要将这些数据,用报表的填报功能,提交录入到数据库中,这样一来可避免到服务器机房录数据的 ...
- 解决Docker容器时区及时间不同步问题
今天在系统集成测试时由测试人员提交了一个测试bug,原因是提交业务数据时间与实际时间(北京时间)有偏差,导致统计异常.由于我们集成测试是向测试人员直接提供完整的Docker镜像作为测试环境,原因应该是 ...
- C++11 新特性: unordered_map 与 map 的对比
unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...