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写三角形,宽高可设置的更多相关文章

  1. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  2. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  3. 前端之css(宽高)设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  4. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  5. 根据设备宽高动态设置View的大小

    得到设备屏幕宽高: WindowManager wManager = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE); ...

  6. css background-image 自适应宽高——转载

    就是这么简单的一句话,设置背景图,并让它100%的适应导航栏宽高,并设置不重复,大小100%就OK了 .zjhn-nav li.active a{ background-image:url(../im ...

  7. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  8. css/css3 未知元素宽高,垂直居中和水平居中

    未知元素的宽高情况下  垂直居中和水平居中 第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-c ...

  9. CSS 宽,高,背景设置

    width 宽,height 高,background 背景:背景色 background-color:颜色值--英文单词/十六进制/rgb:背景图 background-image:url(‘图片路 ...

随机推荐

  1. WPF控件模板和数据模板 - 醉意人间

    来自:http://www.th7.cn/Program/WPF/2011/12/21/51676.shtml ControlTemplate用于描述控件本身. 使用TemplateBinding来绑 ...

  2. c++中class与struct的区别

    0. 结构是一种用关键字struct声明的自定义数据类型.与类相似,也可以包含构造函数,常数,字段,方法,属性,索引器,运算符和嵌套类型. 1.结构在堆栈中创建,是值类型,而类是引用类型.每当需要一种 ...

  3. 负载均衡LVS

    可参考:http://ixdba.blog.51cto.com/2895551/555738 http://os.51cto.com/art/201202/319979.html 也可以参考官网:ht ...

  4. atol实现【转】

    int my_atoi(const char *str) { assert(str != NULL); ; ; while(*str == ' ' || *str == '\n' || *str == ...

  5. 2017广东工业大学程序设计竞赛 E倒水(Water)

    题目链接:http://www.gdutcode.sinaapp.com/problem.php?cid=1057&pid=4 题解: 方法一:对n取2的对数: 取对数的公式:s = log( ...

  6. Window 64位下的客户机配置PLSQL链接远程Oracle

    此文章记录的是艰难探索. 完成如下工作: 服务器A为Windows Serve 2016:安装Oracle. 客户机B为Win7 x64位,安装PLSQLDevelop,链接A上的Oracle. 首先 ...

  7. centos服务器安装配置Postgre9.6

    安装: STEP1:下载对应rpm yum install https://download.postgresql.org/pub/repos/yum/9.6/redhat/rhel-6-x86_64 ...

  8. Linux-打包和文件系统

    1 文件后缀 在Linux中后缀没有实际意义 2 打包文件 tar c 创建一个归档 v 查看过程 f 指定文件名 t 列出归档内容 x 从归档中解压出文件 C 改变到哪个目录 z gzip压缩 j ...

  9. Opencv— — Circle Filter

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  10. OpenCV——Perlin Noise

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...