网页中常见一些三角形,使用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绘制三角的小技巧的更多相关文章

  1. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  2. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  3. css的几个小技巧

    本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设 ...

  4. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  5. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

  6. HTML+CSS - 前端设计的小技巧(持续更新......)

    2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样 ...

  7. AI绘制毛线的小技巧

    1.新建一个500*500的画布.       2.绘制一个大小一样的正方形[颜色#060B1d]       3.绘制圆形1pt描边.       4. ctrl+c ctrl+F 原位复制圆形等比 ...

  8. 整理一些css在使用中的小技巧(进行中)

    1. 消除li排列display:inline-block的间隙 ul{ font-size:; } ul li{ display:inline-block; }

  9. css隐藏文字的小技巧

    前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...

随机推荐

  1. GUI容器之Frame

    Frame public class MyFrame { public static void main(String[] args) { //创建一个Frame对象 Frame frame = ne ...

  2. Struts2 的 OGNL

    ONGL简介: OGNL 的全称是对象图导航语言( Object-Graph Navigation Language),它是一种功能强大的开源表达式语言,使用这种表达式语言,可以通过某种表达式语法,存 ...

  3. java多线程 synchronized 与lock锁 实现线程安全

    如果有多个线程在同时运行,而这些线程可能会同时运行这段代码.程序每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的. 通过卖火车票的例子 火车站要卖票,我们模 ...

  4. Activiti 学习(二)—— Activiti 流程定义和部署

    概述 在这一节,我们将创建一个 Activit 工作流,并启动这个流程,主要包含以下几个步骤: 定义流程,按照 BPMN 的规范,使用流程定义工具,用流程符号把整个流程描述出来 部署流程,把画好的流程 ...

  5. 创建一个People类型,有年龄、工资、性别三个属性。 定义一个方法叫做找对象,找对象方法传过来一个人;

    创建一个People类型,有年龄.工资.性别三个属性. 定义一个方法叫做找对象,找对象方法传过来一个人: 首先如果性别相同,就输出"我不是同性恋", 如果对方是男的,年龄小于28, ...

  6. nodejs安装 Later version of Node.js is already installed. Setup will now exit 及 node与npm版本不符

    暴力删除nodejs导致无法重新安装  Later version of Node.js is already installed. Setup will now exit 1.电脑全局搜索nodej ...

  7. Elasticsearch(ES)分词器的那些事儿

    1. 概述 分词器是Elasticsearch中很重要的一个组件,用来将一段文本分析成一个一个的词,Elasticsearch再根据这些词去做倒排索引. 今天我们就来聊聊分词器的相关知识. 2. 内置 ...

  8. Java基础系列(24)- 增强for循环

    增强for循环 这里我们先只是见一面,做个了解,之后数组部分会重点使用 Java5引入了一种主要用于数组或集合的增强型for循环 Java增强for循环语法格式如下 for(声明语句:表达式){ // ...

  9. Linux系列(4) - 目录处理命令(1)

    前言 linux中一切皆文件.目录为目录文件,普通文件用来保存数据,目录文件用来保存文件 建立目录:mkdir mkdir -p [目录名] -p 递归创建目录,例子:mkdir -p LinuxTe ...

  10. postgres 基础SQL语句 增删改

    查看已创建的数据库:select datname from pg_database; 查看所有数据库的详细信息:select * from pg_database 创建数据库:create datab ...