无关的知识点

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. NOSQL schema创建原则

    (1)数据规模 Bigtable类数据库系统(HBase,Cassandra等)是为了解决海量数据规模的存储需要设计的.这里说的海量数据规模指的是单个表存储的数据量是在TB或者PB规模,单个表是由千亿 ...

  2. 计算机网络-TCP/IP HTTP Conclusion

    1.1OSI 与 TCP/IP 各层的结构 1.2 三次握手和四次挥手,TCP为什么三次握手,四次挥手 在第一次消息发送中,A随机选取一个序列号作为自己的初始序号发送给B:第二次消息B使用ack对A的 ...

  3. javah tool for Android Native Application

    javah可以在Eclipse中配置成为External Tools,选择External Tools Configurations,配置如下,经过测试通过. Location: ${system_p ...

  4. CF959F

    题目大意:给定n个数,有Q次询问,每次询问由两个数l,x组成,表示前缀[1,l]构成的子序列有多少异或起来为x,个数%1e9+7 做法:考虑一个由x个数构成的线性基,如果这个线性基由Y个数构成,可以通 ...

  5. 服务端搭建——腾讯云通信(IM)

    前言 在手机app中因为需要即时聊天功能,在项目采用腾讯云通信服务.如下流程图: 当手机端拿到签名后,就可登录IM,使用im提供的sdk收发信息. 准备工作 1.在腾讯云注册获取appid 2.申请开 ...

  6. 使用jdk8 stream 统计单词数

    在我的SpringBoot2.0不容错过的新特性 WebFlux响应式编程里面,有同学问如何使用stream统计单词数.这是个好例子,也很典型,在这里补上. 下面的例子实现了从一个文本文件读取(英文) ...

  7. Nodejs经验谈

    前言 这里主要说一下之前使用Nodejs开发踩过的坑,只说坑不填坑,那就是赤裸地耍流氓,文中有大量的说明及填坑方法,了解的看官可以直接跳过. PS:说实话,Nodejs的坑确实蛮多的:但是上手简单,扩 ...

  8. Day7 类的继承和继承实现的原理

    继承可以分为但继承,多继承. 继承的基本形式 class ParentClass1(object): #定义父类 pass class ParentClass2: #定义父类 pass class S ...

  9. leetcode-判断回文数,非字符串算法(java实现)

    link: https://leetcode-cn.com/problems/palindrome-number/description/ 问题: 判断一个整数是否是回文数.回文数是指正序(从左向右) ...

  10. 时间复杂度O(n),空间复杂度O(1)解斐波那契数列

    #include <stdio.h> #include <iostream> using namespace std; long long fibs1(int in_iN) { ...