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. MVC入门——编辑页

    添加Action  EditUserInfo using System; using System.Collections.Generic; using System.Linq; using Syst ...

  2. 继续聊WPF——获取ComboBox中绑定的值

    千万不要认为WPF中的数据绑定会很复杂,尽管它的确比Winform程序灵活多了,但其本质是不变的,特别是ComboBox控件,我们知道在Winform中对该控件的有两个专为数据绑定而设定的属性——Di ...

  3. oracle 10g 数据库与客户端冲突导致实例创建无监听问题

    同事在oracle 10g上创建一个实例,快结束时弹出一个错误,提示监听失败之类.查看服务,并无生成监听服务.于是删除重来,一连试了好几次,都是如此. 这真是令人心烦意乱.提示里面有说到端口1521, ...

  4. Hadoop实战-Flume之Hdfs Sink(十)

    a1.sources = r1 a1.sinks = k1 a1.channels = c1 # Describe/configure the source a1.sources.r1.type = ...

  5. Eclipse中同时打开多个Console

    实现方法: 1.点击Open Console案例下拉三角,选择New Console View. 2.点击Pin Console按钮將两个控制台同时固定住. 3.点击Display Selected ...

  6. A桶中有多少水?

    如果你能算出桶中有多少水,我便许你下山去玩.有一天,老和尚让小和尚将A桶的水挑到B桶去,可是小和尚却想下山玩,不愿意挑水,老和尚便说:”如果你能够根据我的提示算出A桶中有多少升水,我便许你下山去玩.” ...

  7. 配置tomcat,访问端口改为80

    首先:找到tomcat的的config文件夹下的server.xml文件: 编辑server.xml 保存server.xml文件,重启tomcat服务器,即可. 亲测好使.

  8. jmeter测试总结

    一次性能测试的总结 相关推荐:Apusic应用服务器的性能调节_JVM优化 Apusic应用服务器作为企业应用的运行平台,系统的性能非常重要.当应用对性能的要求比较苛刻时,就要考虑是否需要改变系统的缺 ...

  9. jstat监控gc情况

    jstat监控gc情况 JavaJVMJ2SE应用服务器SUN  性能测试过程中,我们该如何监控java虚拟机内存的使用情况,用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的t ...

  10. ThinkPHP 静态页缓存

    通过对ThinkPHP的学习,记录下静态页的缓存步骤,以便以后查阅: 1.配置配置文件/Admin/Conf/config.php代码如下: /*静态缓存*/ 'HTML_CACHE_ON'=> ...