网页中常见一些三角形,使用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. Markdown Sublime flowchart.js 流程图

    先亮出来一个 flowchart.js 的 Sample 给 Sublime 安装 MarkdownPreview,这个不必多说了 Sublime Text -> Preferences -&g ...

  2. 性能测试工具JMeter 基础(七)—— 测试元件: 逻辑控制器之if逻辑控制器

    逻辑控制器线程组指定了其取样器执行的逻辑条件.顺序,并且执行顺序是按照位置顺序从上至下执行的 if逻辑控制器(If Controller) 在逻辑控制器中可设置条件,当条件满足的时候才会被执行 一共有 ...

  3. NOI2021 游记

    day -10 开始一天一场NoIP模拟赛,前几场每天挂分很厉害(这么说是因为后面的以前做过) 自省选惨挂以后国赛的知识点就几乎没怎么摸过了,考前发现连manacher都不会写了,反演?又陷入&quo ...

  4. Appium自动化(8) - 可定位的控件属性

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 在前面几篇文章可以看到,一个 ...

  5. 2020ICPC沈阳站C题 Mean Streets of Gadgetzan

    大致题意 原题链接 翻译 \(有n个逻辑变量 请你分别对它们赋值 使其满足m个命题\) \(命题有四种格式:\) 单独数字x 表示第x个逻辑变量为真 ! + 数字x 表示第x个逻辑变量为假 若干个数字 ...

  6. CodeForce-798C Mike and gcd problem(贪心)

    Mike has a sequence A = [a1, a2, ..., an] of length n. He considers the sequence B = [b1, b2, ..., b ...

  7. 洛谷P1583——魔法照片(结构体排序)

    https://www.luogu.org/problem/show?pid=1583#sub 题目描述 一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人. ...

  8. Linux安装Cockpit监控服务

    CentOS/RHEL 8的新特性之一就是自带了一个cockpit的监控服务.通过c/s架构模式运行,客户端输入ip:端口即可访问 这类似于glances监控. 如果你不是使用的centos/rhel ...

  9. 美团分布式定时调度框架XXL-Job基本使用

    一:XXL JOB 基本使用 1.官方中文文档:https://www.xuxueli.com/xxl-job/ 2.基本环境: 2.1:git下载项目, 执行xxl-job数据库初始化脚本 2.2: ...

  10. Jmeter系类(31) - JSR223(1) | 控件介绍

    JSR233 介绍 JSR223控件执行JSR223脚本代码用于创建/更新所需的某些变量 JSR223可以使用其内置的变量,有助于精简脚本,提高开发测试的效率 由于JSR223脚本编译方式基本相同,J ...