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 如果不设置其中的某个值,也不会出问题,比如 ...
随机推荐
- SQL Server Column Store Indeses
SQL Server Column Store Indeses SQL Server Column Store Indeses 1. 概述 2. 索引存储 2.1 列式索引存储 2.2 数据编码和压缩 ...
- 从零自学Hadoop(11):Hadoop命令上
阅读目录 序 概述 Hadoop Common Commands User Commands Administration Commands File System Shell 引用 系列索引 本文版 ...
- 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 ...
- SQL Server自动化运维系列——监控磁盘剩余空间及SQL Server错误日志(Power Shell)
需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 在所有的自检流程中最基础的一个就是磁盘剩余空间检测. ...
- 编译安装zabbix 3.0及分开部署配置详解
实验系统:CentOS 6.6_x86_64 实验前提:提前准备好编译环境,防火墙和selinux都关闭 实验说明:本实验共有4台主机,IP及角色分配如拓扑 下载地址:试验中用到mariadb软件的下 ...
- Machine Learning Algorithms Study Notes(6)—遗忘的数学知识
机器学习中遗忘的数学知识 最大似然估计( Maximum likelihood ) 最大似然估计,也称为最大概似估计,是一种统计方法,它用来求一个样本集的相关概率密度函数的参数.这个方法最早是遗传学家 ...
- JSON 字符串中的中括号和大括号区别详解
json 变量有两种可能, 可能是一个对象, (类似 类的实例), 也可能是一个数组!! 主要是要 从 ""语义" 上来分析, 到底该用 大括号还是用中括号: 如果从语义 ...
- angular中自定义依赖注入的方法和decorator修饰
自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ thi ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- ASP.net 实现禁止用户重复登录
本文先为大家介绍如何利用缓存Cache方便地实现此功能. Cache与Session这二个状态对像的其中有一个不同之处,Cache是一个全局对象,作用的范围是整个应用程序,所有用户:而Session是 ...