纯CSS小三角制作
无关的知识点
①
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小三角制作的更多相关文章
- CSS小三角制作
以下是参考资料: 好多种图形的:http://www.jb51.net/css/41448.html -------------------------------------15.11.12---- ...
- 纯CSS的三角符号
项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...
- 模仿也是提高,纯css小技巧实现头部进度条
刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...
- css 小三角
span{ display: inline-block; border-top: 100px solid red; border-right: 100px solid transparent; bor ...
- 常见Z纯CSS小样式合集(三角形)
三角形 .sanjiao{ width:0px; height: 0px; overflow: hidden; border-width: 100px; border-color: transpare ...
- css实现三角箭头(兼容IE6)
纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
随机推荐
- android bitmap的内存分配和优化
首先Bitmap在Android虚拟机中的内存分配,在Google的网站上给出了下面的一段话 大致的意思也就是说,在Android3.0之前,Bitmap的内存分配分为两部分,一部分是分配在Dalvi ...
- TCP连接建立系列 — 服务端接收SYN段
本文主要分析:服务器端接收到SYN包时的处理路径. 内核版本:3.6 Author:zhangskd @ csdn blog 接收入口 1. 状态为ESTABLISHED时,用tcp_rcv_esta ...
- Android的Context Manager(服务管理器)源码剖析-android学习之旅(99)
Context Manager介绍 Context Manager对应的进程是servicemanager进程,它先于Service Server和服务客户端运行,进入接收IPC数据的待机状态,处理来 ...
- MR for Baum-Welch algorithm
The Baum-Welch algorithm is commonly used for training a Hidden Markov Model because of its superior ...
- RGB颜色转换算法C语言实现
typedef unsigned short TUINT16; #define RGB565(R, G, B) \ (((TUINT16) ((R) >> 3)) << ...
- 关于ARC的介绍和ARC与MRC混编解决
1. ARC & MRC 混合开发 在项目开发中,遇到使用MRC开发的第三方库怎么办? 例如:ASI 1> 尝试使用Xcode的转换工具(失败率比较高) 2> 在编译选项中,为MR ...
- Cocoa编程之IBAction和IBOutlet含义
IBAction / IBOutlet / IBOutletCollection 时间 2014-05-05 15:00:00 NSHipster原文 http://nshipster.com/i ...
- Windows平台安装及配置Hadoop(不借助cygwin)
由于项目需要,我在VMware上装了几个虚拟机Windows server 2012 R2,并要搭建Hadoop集群.刚刚入门hadoop,一头雾水,然后开始搜各种教程,首先是选用cygwin进行安装 ...
- JavaScript继承详解
面向对象与基于对象 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继 ...
- ssh三大框架集成后,jsp中采用forword标签提交时会报错的解决方案
最近这两天心烦,所以没事就做做三大框架,对于今天遇到了一个烦心的事!或许有很多开发人员对于web.xml拦截器的认识不清,出现了这样的情况 <filter> <filter-name ...