用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(‘图片路 ...
随机推荐
- iOS开发之──传感器使用
本文转载至 http://mobile.51cto.com/iphone-423219.htm 在实际的应用开发中,会用到传感器,下面首先介绍一下iphone4的传感器,然后对一些传感器的开发的API ...
- 理解c/c++指针和引用
1 指针的指针 比如int* a,那么a是指向一个int型的对象的.也就是说,*前面的类型是该指针指向的对象的类型. 同理int** a的话,a指向一个int*型的对象,也就是说,它指向的对象也是一个 ...
- Netty 100万级高并发服务器配置
前言 每一种该语言在某些极限情况下的表现一般都不太一样,那么我常用的Java语言,在达到100万个并发连接情况下,会怎么样呢,有些好奇,更有些期盼. 这次使用经常使用的顺手的netty NIO框架(n ...
- MongoDB 倾向于将数据都放在一个 Collection 下吗?
不是这样的. Collection 的单个 doc 有大小上限,现在是 16MB,这就使得你不可能把所有东西都揉到一个 collection 里.而且如果 collection 结构过于复杂,既会影响 ...
- linux内核container_of宏定义分析
看见一个哥们分析container_of很好,转来留给自己看 一.#define offsetof(TYPE, MEMBER) ((size_t) & ((TYPE *)0)->MEMB ...
- 管中窥Vue
博客文章链接:管中窥Vue Vue和Angular.React.js的相同点和不同点? 与React的相同: 都使用了Virtual DOM 提供了响应式和组件化的视图组件 将注意力集中保持在核心库, ...
- malloc、calloc、realloc和alloca各种的区别
需要先包含头文件 #include"malloc.h" malloc是标准的在堆中开辟新的空间 比如 char *pt=(char *)malloc(10*sizeof(char) ...
- Gym - 101147E E. Jumping —— bfs
题目链接:http://codeforces.com/gym/101147/problem/E 题意:当人在第i个商店时,他可以向左或向右跳di段距离到达另一个商店(在范围之内),一个商店为一段距离. ...
- (转)如何使用Java、Servlet创建二维码
归功于智能手机,QR码逐渐成为主流,它们正变得越来越有用.从候车亭.产品包装.家装卖场.汽车到很多网站,都在自己的网页集成QR码,让人们快速找到它们.随着智能手机的用户量日益增长,二维码的使用正在呈指 ...
- 通过dom4j写.xml文件
步骤: 1.左键选中src,点击红圈2: 2.新建类: 3.开始写代码: package com.bjsxt.xml; import java.io.File; import java.io.File ...