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页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...
随机推荐
- Mysql for Mac 安装及环境配置
一.下载及安装 首先去官网下载mac对应版本的Mysql,尾缀为.dmg的程序包 下载地址:https://dev.mysql.com/downloads/mysql/ 下载完毕后,一步步傻瓜式安装即 ...
- 使用Keepalived实现Nginx的双机主备高可用
1.概述 前面我们聊过使用 Nginx 为 后端Tomcat 做负载均衡.高可用,但是这时Nginx又成了单点,如果Nginx不幸挂掉,整个网站便无法访问. 此时我们就会用到另一个软件 -- Keep ...
- 聚类算法与K-means实现
聚类算法与K-means实现 一.聚类算法的数学描述: 区别于监督学习的算法(回归,分类,预测等),无监督学习就是指训练样本的 label 未知,只能通过对无标记的训练样本的学习来揭示数据的内在规律和 ...
- 网络层协议、ARP攻击
一.IP数据包格式 二.ICMP协议介绍 PING命令 三.ARP协议介绍 四.ARP攻击原理 一.IP数据包格式 网络层的功能 定义了基于IP协议的逻辑地址 连接不同的媒介类型 选择数据通过网络的最 ...
- 剑指offer计划19( 搜索与回溯算法中等)---java
1.1.题目1 剑指 Offer 64. 求1+2+-+n 1.2.解法 这题看评论区真的绝了,都是人才,各个说话都好听,我看到个还有用异常来结束的就离谱. 这题用了&&当左边为fal ...
- 论文解读(PCL)《Prototypical Contrastive Learning of Unsupervised Representations》
论文标题:Prototypical Contrastive Learning of Unsupervised Representations 论文方向:图像领域,提出原型对比学习,效果远超MoCo和S ...
- 【敏捷0】敏捷项目管理-为什么从敏捷开始?为什么从PMI-ACP开始?
作为敏捷项目管理的开篇文章,还是先来简单地说一说为什么先从敏捷开始,为什么是以 PMI-ACP 为参考.当然,这一系列的文章可能不可避免地会为 PMI-ACP 做一些广告,但是我想告诉大家的是,敏捷以 ...
- win10系统安装jdk
应用程序形式 文件包形式 环境变量配置 https://www.cnblogs.com/gz9218/p/2ae083861f6749899b1b800faabe1c17.html
- 重启ubuntu系统VMware tools失效处理方法
1) sudo apt-get autoremove open-vm-tools 2) Install VMware Tools by following the usual method (Virt ...
- 关于java中BigDecimal的简介
关于java中BigDecimal的简介 1.BigDecimal属于大数据,精度极高,不属于基本数据类型,属于java对象(引用数据类型), 这是sun提供的一个类,专门用在财务软件中. 2.注意: ...