用css写三角形,宽高可设置

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weiwenwen6/article/details/79978038

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;

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试