用css写三角形,宽高可设置
1.不传@h,@c === @h;
2.元素width = @w, 元素height = @h*2
3.配合上.center()实现图标居中
less版本:
//上下左右居中
.center(){
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
//三角形
//方向,颜色,宽度,高度
.triangle(right, @c, @w, @h: @w){
border-left: @w solid @c;
border-right: none;
border-top: @h solid transparent;
border-bottom: @h solid transparent;
}
.triangle(left, @c, @w, @h: @w){
border-left: none;
border-right: @w solid @c;
border-top:@h solid transparent;
border-bottom: @h solid transparent;
}
.triangle(bottom, @c, @w, @h: @w){
border-left: @h solid transparent;
border-right: @h solid transparent;
border-top: @w solid @c;
border-bottom: none;
}
.triangle(top, @c, @w, @h: @w){
border-left: @h solid transparent;
border-right: @h solid transparent;
border-top: none;
border-bottom: @w solid @c;
}
css版本:
border-left: none;
border-right: 6px solid #627387;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: '';
display: block;
用css写三角形,宽高可设置的更多相关文章
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- 前端之css(宽高)设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- 根据设备宽高动态设置View的大小
得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...
- css background-image 自适应宽高——转载
就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../im ...
- css实现不定宽高的div水平、垂直居中
一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示. 兼容方面也一样拿IE来做比较,第二种方法IE ...
- css/css3 未知元素宽高,垂直居中和水平居中
未知元素的宽高情况下 垂直居中和水平居中 第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-c ...
- CSS 宽,高,背景设置
width 宽,height 高,background 背景:背景色 background-color:颜色值--英文单词/十六进制/rgb:背景图 background-image:url(‘图片路 ...
随机推荐
- HDU 5336 XYZ and Drops 2015 Multi-University Training Contest 4 1010
这题的题意是给你一幅图,图里面有水滴.每一个水滴都有质量,然后再给你一个起点,他会在一開始的时候向四周发射4个小水滴,假设小水滴撞上水滴,那么他们会融合,假设质量大于4了,那么就会爆炸,向四周射出质量 ...
- 【BZOJ2400】Spoj 839 Optimal Marks 最小割
[BZOJ2400]Spoj 839 Optimal Marks Description 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. ...
- input光标位置
兼容谷歌火狐-input光标位置 input框在没有添加任何效果的情况下,输入文字后光标始终在最后的位置,谷歌||火狐效果一样 但是在给input加入点击事件后 谷歌:input框插入文字后,光标会自 ...
- win10搭建selendroid测试环境
官网对于搭建selendroid列出如下要求: 就如 Junit 一样,Selendroid 可以在 Mac,Linux 和 Windows 上使用.Java 主打的就是跨平台. Java SDK ( ...
- [bzoj1002] [FJOI2007]轮状病毒轮状病毒(基尔霍夫矩阵)
Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子 和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下 ...
- flex平分测试
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 有哪些逾渗模型percolation?
自wiki 1.第一个研究的模型是伯努利逾渗, 这个模型中所有键bond独立,物理学家称为键逾渗. 2.随机聚类模型,同Ising模型和Potts模型有很多联系 3.在完备图上的键逾渗,属于在随机图上 ...
- Python作业之用户管理
作业 流程图没有画,懒,不想画 readme没有写,懒,不想写.看注释吧233333 #! /usr/bin/env python # -*- coding: utf-8 -*- # __author ...
- IPFS中文简介
ipfs是什么? 它是一个协议也是一个网络,已经运行了2年半,并非虚无缥缈的空气. 它像比特币网络一样,并没有发明什么新技术,他只是将很多种技术(P2P网络技术,bt传输技术,Git版本控制,自证明文 ...
- ffmpeg full help
Hyper fast Audio and Video encoder usage: ffmpeg [options] [[infile options] -i infile]... {[outfile ...