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后这是结构图:,就右下角一小块的变色——代码如下:

  1. border-style: solid;
  2. border-width: 0 0 10px 10px;
  3. border-color: transparent transparent #ffffff transparent;

CSS-border属性制作小三角的更多相关文章

  1. css border属性做小三角标

    <!doctype html><html> <head> <title></title> <meta charset="ut ...

  2. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  3. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  4. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  5. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  6. css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...

  7. CSS创建三角形(小三角)的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  8. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  9. CSS border 属性和 border-collapse 属性

    border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 ...

随机推荐

  1. 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 ...

  2. ORACLE调整SGA_TARGET值耗费时间长案例

    在一数据库版本为(标准版)Oracle Database 10g Release 10.2.0.4.0 - 64bit Production 的服务器上调整 sga_target时,遇到命令执行了非常 ...

  3. 使用Navicat连接Oracle数据时的一些问题,连接时错误:ORA-28547,新建用户后连接时错误:ORA-01017

    发现Navicat作为一款连接数据库的工具确实很好用,可视化的界面看着舒服很多,下面说说我今天在连接Oracle数据库时的一些问题: 1.安装好Oracle后直接用Navicat是连接不上的,会出现如 ...

  4. SQL Server自动化运维系列——监控跑批Job运行状态(Power Shell)

    需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 在上一篇文章中已经分析了SQL SERVER中关于邮 ...

  5. Python写地铁的到站的原理简易版

    Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这 ...

  6. springmvc和struts2的区别

    springmvc和struts2的区别 1.springmvc基于方法开发的,struts2基于类开发的. 2.单例和多例的区别:springmvc在映射的时候,通过形参来接收参数的,是将url和c ...

  7. android setDestinationInExternalPublicDir 下载到SD卡根目录

    一:setDestinationInExternalPublicDir(“Trinea”, “MeiLiShuo.apk”);表示设置下载地址为sd卡的Trinea文件夹,文件名为MeiLiShuo. ...

  8. 报表开发之批量导入导出excel

    在日常使用报表过程中,会有这样一种情况,你将Excel表分发给各个员工,员工填完后,统一整理成多个Excel,你需要将这些数据,用报表的填报功能,提交录入到数据库中,这样一来可避免到服务器机房录数据的 ...

  9. 解决Docker容器时区及时间不同步问题

    今天在系统集成测试时由测试人员提交了一个测试bug,原因是提交业务数据时间与实际时间(北京时间)有偏差,导致统计异常.由于我们集成测试是向测试人员直接提供完整的Docker镜像作为测试环境,原因应该是 ...

  10. C++11 新特性: unordered_map 与 map 的对比

    unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...