CSS绘制三角的小技巧
网页中常见一些三角形,使用css直接画出来就可以,不必做成图片或者字体图标
当把一个盒子的高和宽的长度都设置为0,并且分别指定边框样式时,就会得到以下图形:

受此启发,可以知道三角是如何制作的(想要保留哪个三角只需把其他三个边框设置为透明即可)
例如:
div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
}
其中
line-heiight:0;
font-size:0;
只是为了适配不同的浏览器,一般情况下不写也可以
CSS绘制三角的小技巧的更多相关文章
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
- css的几个小技巧
本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- 25条div+CSS编程提醒及小技巧整理
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...
- HTML+CSS - 前端设计的小技巧(持续更新......)
2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样 ...
- AI绘制毛线的小技巧
1.新建一个500*500的画布. 2.绘制一个大小一样的正方形[颜色#060B1d] 3.绘制圆形1pt描边. 4. ctrl+c ctrl+F 原位复制圆形等比 ...
- 整理一些css在使用中的小技巧(进行中)
1. 消除li排列display:inline-block的间隙 ul{ font-size:; } ul li{ display:inline-block; }
- css隐藏文字的小技巧
前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...
随机推荐
- Android系统编程入门系列之应用内键值对数据的简单保存
在应用程序间及与用户的通信交互过程中,会产生并传递一系列数据.针对这些数据,有部分是只在应用程序中使用的缓存数据,还有一部分是在不同位置多次或长时间使用的持久化数据. 对于缓存数据来说,通常以代码中定 ...
- js基本数据类型之间的转换
常见五大基本数据类型 1.number 2.string 3.boolean 4.undefined 5.null 一.转换为string ①调用toString() 方法 因为null和undefi ...
- 记一次线上问题 → 对 MySQL 的 ON UPDATE CURRENT_TIMESTAMP 的片面认知
开心一刻 老婆痛经,躺在沙发上,两岁的女儿看着她问道 女儿:妈妈,你怎么了 老婆:妈妈肚子痛 女儿:哦,妈妈你头疼 老婆:不是头疼,妈妈是肚子疼 女儿用她的不锈钢饭碗砸向老婆的额头,说道:妈妈,你哪里 ...
- Toast控件
------------恢复内容开始------------ 四种常见的App弹窗设计:Toast.Dialog.Actionbar 和 Snackbar 弹窗又称为对话框,是App与用户进行交互的常 ...
- ubantu虚拟机搭建xl2tp服务
在编译成功源码,安装完毕xl2tpd后,便可以配置xl2tpd服务.基本配置过程主要涉及两个配置文件:一个用来配置xl2tpd, 一个用来配置ppp协议.下面分别对这两个文件进行说明,最后添加xl2t ...
- word域实现动态填充信息附件下载
1.问题描述:在页面上一些下载附件功能,点击触发执行下载操作时候,有些电脑的浏览器可以,有些电脑的浏览器下载不了,电脑打开弹出的下载框下载的不是一个文件,而是一个如jspx后缀名的页面,jspx后缀是 ...
- python类、对象
python类.对象 学习完本篇,你将会深入掌握 什么是类,对象 了解类和对象之间的关系 能独立创建一个People(人类),属性有姓名.性别.年龄.提供一个有参的构造方法,编写一个show方法,输出 ...
- Java实现导出Excel
项目中实现的代码: 一.//controller @RequestMapping(value = "/exportAccountManager") public void expo ...
- 织梦 arclist调用副栏目内容解决办法
1 打开include/taglib/arclist.lib.php,找到296行: if($CrossID=='') $orwheres[] = ' arc.typeid IN ('.GetSonI ...
- Java基础系列(1)- JDK、JRE、JVM
Java三大版本(Write Once:Run Anywhere) JavaSE:标准版 JavaME:嵌入式开发 JavaEE:E企业级开发 JDK.JRE.JVM JDK是开发工具包 JRE是编译 ...