网页中常见一些三角形,使用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. Java网络编程之TCP

    Java网络编程之TCP ​ TCP主要需要两个类:Socket和ServerSocket,Socket是客户端连接服务器时创建,参数需要指定服务器的ip和端口,ServerSocket是服务器端创建 ...

  2. Python - 面向对象编程 - 实战(5)

    前言 主要是针对静态方法.类方法.实例方法.类属性.实例属性的混合实战 需求 设计一个 Game 类 属性 定义一个类属性 top_score 记录游戏的历史最高分,这个属性很明显只跟游戏有关,跟实例 ...

  3. git各种操作:基本操作 and 多人协作 and 冲突解决

    git基本操作 git 上次文件到远程仓库(参考:https://blog.csdn.net/beiqiaofeng123/article/details/104859326) 如果第一次上传,配置一 ...

  4. C# 动态构建表达式树(二)——构建 Select 和 GroupBy 的表达式

    C# 动态构建表达式树(二)--构建 Select 和 GroupBy 的表达式 前言 在上篇中写了表达式的基本使用,为 Where 方法动态构建了表达式.在这篇中会写如何为 Select 和 Gro ...

  5. CentOS8安装ntp实现时间同步

    在CentOS8.0中默认不再支持ntp软件包,时间同步将由chrony来实现,像我这种习惯了ntp同步时间的,一时难以去适应chrony. 本文将通过wlnmp提供的源,来安装ntp服务 添加wln ...

  6. JDBC-1(概述&建立)

    基于宋红康老师所讲JDBC所作笔记 1.JDBC概述 1.1 数据持久化 持久化:将数据保持到可掉电式存储设备中以供之后使用. 数据持久化意味着将内存中的数据保存到硬盘上加以固化,实现过程大多通过各种 ...

  7. sonar-scanner命令参数分析

    C:\Users\huang>sonar-scanner -h INFO: INFO: usage: sonar-scanner [options] INFO: INFO: Options: I ...

  8. shell脚本在CentOS7自动更包

    手动更包有些繁琐,就想着用脚本自动更包,后来试了下,最后成功啦! 以下是根据实际项目编写的: 操作环境:centos7.0 tomcat版本:7.0.78 以下为项目存放目录如下: updatefil ...

  9. 大型项目源码集合「GitHub 热点速览 v.21.39」

    作者:HelloGitHub-小鱼干 代码,尤其是优雅规范的代码,一直都是学习编程技巧的捷径.虽然有实用的代码小片段,能拯救当前业务的燃眉之急,但是真要去提升自己的技能还是得从大型的项目,尤其是有一定 ...

  10. python操作Redis方法速记

    redis有5种数据结构,分别如下: 5种数据结构 python语言对5种数据结构的增删改查 全局函数 redis 连接 import redis pool = redis.ConnectionPoo ...