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. SQL Server Column Store Indeses

    SQL Server Column Store Indeses SQL Server Column Store Indeses 1. 概述 2. 索引存储 2.1 列式索引存储 2.2 数据编码和压缩 ...

  2. 从零自学Hadoop(11):Hadoop命令上

    阅读目录 序 概述 Hadoop Common Commands User Commands Administration Commands File System Shell 引用 系列索引 本文版 ...

  3. com.sun.xml.internal.ws.server.ServerRtException: Server Runtime Error: java.net.BindException: Cannot assign requested address: bind

    在发布 web service 时报错: Endpoint.publish(publishAddress, hl7MessageReveiver); com.sun.xml.internal.ws.s ...

  4. SQL Server自动化运维系列——监控磁盘剩余空间及SQL Server错误日志(Power Shell)

    需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 在所有的自检流程中最基础的一个就是磁盘剩余空间检测. ...

  5. 编译安装zabbix 3.0及分开部署配置详解

    实验系统:CentOS 6.6_x86_64 实验前提:提前准备好编译环境,防火墙和selinux都关闭 实验说明:本实验共有4台主机,IP及角色分配如拓扑 下载地址:试验中用到mariadb软件的下 ...

  6. Machine Learning Algorithms Study Notes(6)—遗忘的数学知识

    机器学习中遗忘的数学知识 最大似然估计( Maximum likelihood ) 最大似然估计,也称为最大概似估计,是一种统计方法,它用来求一个样本集的相关概率密度函数的参数.这个方法最早是遗传学家 ...

  7. JSON 字符串中的中括号和大括号区别详解

    json 变量有两种可能, 可能是一个对象, (类似 类的实例), 也可能是一个数组!! 主要是要 从 ""语义" 上来分析, 到底该用 大括号还是用中括号: 如果从语义 ...

  8. angular中自定义依赖注入的方法和decorator修饰

    自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...

  9. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  10. ASP.net 实现禁止用户重复登录

    本文先为大家介绍如何利用缓存Cache方便地实现此功能. Cache与Session这二个状态对像的其中有一个不同之处,Cache是一个全局对象,作用的范围是整个应用程序,所有用户:而Session是 ...