网页中常见一些三角形,使用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. 查看局域网内所有的主机名、MAC地址和IP地址

    查看所有 IP at MAC $ arp -a ? (10.125.49.187) at 18:81:e:eb:ef:c0 on en0 ifscope [ethernet] ? (10.125.50 ...

  2. JDK方法区、元空间区别 & String.intern相关面试题

    一.方法区.永久代.元空间 1.方法区.永久代 方法区也是各个线程共享的内存区域,它用于存储已经被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.方法区域又被称为"永久代& ...

  3. AI异构通信:重压下的突围,华为P50系列的卓越体验

    撰文 |懂懂 编辑 | 秦言 来源:懂懂笔记 "华为不会让消费者失望."华为消费者业务CEO余承东在P50系列发布会上如是说. 今年4月美国对华为第四轮制裁以来,华为终端产品无缘5 ...

  4. 处理burp log 小脚本

    burp 日志保存 保存的日志格式为 将日志中的数据包 每个数据包保存到一个单独的txt里面 然后可以控制目录放进不同的目录中 #coding=utf-8 import re import os de ...

  5. reeswitch http https ws wss nginx domain default port config

    现代H5浏览器产业链越来越丰富,http+websocket+webrtc+sip组合已经是一种非常成熟的web原生音视频通讯解决方案 FreeSWITCH是一个开源的电话软交换平台,早在SIP年代就 ...

  6. k8s 部署elasticsearch报 max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144]

    1.由于登不上云的节点 不采用修改节点配置的方式 修改部署的stateful 加上 initContainers 它和 containers 同一层级的 initContainers: - name: ...

  7. Java基础系列(16)- Scanner进阶使用

    了解更多的sanner方法 Ctrl+鼠标左键,点击[Scanner] 点击Structure 看到了Scanner类下面的所有方法,以及具体方法实现的底层封装逻辑 拓展例子_nextInt()获取和 ...

  8. django 对models中上传的文件或图片改名

    def user_directory_path(instance,filename): print instance,filename ext = filename.split('.')[-1] pr ...

  9. pyQt5设计无边框窗口(二)

    无边框,自定义窗口背景 from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtGui import * impor ...

  10. 定要过python二级 第三套

    第一模块   基础操作(共三道题) 1. 安装python 包  我在c  盘打开  但是它给我安装到了d盘得  anaconda3 下面  关键是  我在c盘  打开python .exe   创建 ...