无关的知识点

background-clip 属性规定背景的绘制区域。

1.padding-box:从padding区域(不含padding)开始向外裁剪背景。

2.border-box:从border区域(不含border)开始向外裁剪背景。

3.content-box:从content区域开始向外裁剪背景。

4.text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。

clip

auto:对象无剪切rect(<number>|auto <number>|auto <number>|auto <number>|auto):依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。


纯CSS三角形写法

<div id="triangle-up"></div>
 #triangle-up {
width:;
height:;
border-left: 50px solid yellow;
border-right: 50px solid green;
border-bottom: 100px solid red;
border-top: 50px solid blue;
}

结果如左图所示,原理也很见到那,width和height都是0所以只剩下一点,给点加上巨大的border就成了这个效果

纯CSS小三角制作的更多相关文章

  1. CSS小三角制作

    以下是参考资料: 好多种图形的:http://www.jb51.net/css/41448.html -------------------------------------15.11.12---- ...

  2. 纯CSS的三角符号

    项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...

  3. 模仿也是提高,纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  4. css 小三角

    span{ display: inline-block; border-top: 100px solid red; border-right: 100px solid transparent; bor ...

  5. 常见Z纯CSS小样式合集(三角形)

    三角形 .sanjiao{ width:0px; height: 0px; overflow: hidden; border-width: 100px; border-color: transpare ...

  6. css实现三角箭头(兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  7. 纯css制作小三角

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

  8. 纯CSS制作三角(转)

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

随机推荐

  1. ubuntu15.04下sublime text不能输入中文的解决

    原因是由于中文输入法的输入焦点不能插入sublime的输入窗口中,需要使用代码强制插入输入焦点. 代码是cjacker 君提供的,可以看原始的讨论帖子: http://www.sublimetext. ...

  2. SharePoint&quot;在数据表中编辑&quot;不可用

    报错: 没有安装与 Windows SharePoint Services 兼容的数据表组件 浏览器不支持 ActiveX 控件 或者禁用了对 ActiveX 控件的支持 第一反应,就是什么东西没装, ...

  3. 使用vs2010 opencv2.4.4编译release版本程序

    大体上要注意一下几点内容: 1.vc++目录的选择上,库目录选择为opencv目录中的staticlib目录 2.在链接->输入->附加依赖库,中添加,相应的staticlib库目录中的所 ...

  4. JSON 在Ajax数据交换中的简单运用

    随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日. 首先需要 ...

  5. win32多线程学习笔记

    <多核程序设计技术> 第五章--线程api,一个使用windows事件的线程应用程序,vs2008下编译调试通过. // 线程通信机制.cpp : 定义控制台应用程序的入口点. // #i ...

  6. C# /VB.NET 插入、修改、删除Word批注

    批注内容可以是对某段文字或内容的注释,也可以是对文段中心思想的概括提要,或者是对文章内容的评判.疑问,以及在阅读时给自己或他人起到提示作用.本篇文章中将介绍如何在C#中操作Word批注,主要包含以下要 ...

  7. MySQL 菜鸟入门“秘籍”

    一.MySQL简介 1.什么是数据库 ? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不 ...

  8. Spring Cloud项目中通过Feign进行内部服务调用发生401\407错误无返回信息的问题

    问题描述 最近在使用Spring Cloud改造现有服务的工作中,在内部服务的调用方式上选择了Feign组件,由于服务与服务之间有权限控制,发现通过Feign来进行调用时如果发生了401.407错误时 ...

  9. Jquery测试题

    一.Jquery测试题 下面哪种不是jquery的选择器?(单选) A.基本选择器 B.后代选择器 C.类选择器 D.进一步选择器 考点:jquery的选择器 (C) 当DOM加载完成后要执行的函数, ...

  10. ORACLE 分页查询

    Oracle之分页查询 Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. 分页查询格式: SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SE ...