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

标签: css
7人阅读 评论(0) 收藏 举报
分类:

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;
查看评论

如何使用HTML&CSS写一个三角形。

使用CSS写一个三角形。
  • StoneG_G
  • StoneG_G
  • 2017-10-10 09:41:29
  • 1658

如何用CSS写一个三角形

如何用CSS写一个三角形?需要了解盒子模型,再运用transparent属性值,就可以办到。...
  • Robocop_Mao
  • Robocop_Mao
  • 2015-08-02 00:25:36
  • 999

利用 :before :after 写小三角形

之前写的三角形一直在同一个颜色,没有边框的样式。如下: CSS代码如下:.tri-up{width: 0;height:0;border-left:20px solid transparent;...
  • Sabrina_TSM
  • Sabrina_TSM
  • 2016-08-03 11:47:49
  • 7040

用css伪类制作三角形

.contact_div:after{content:""; display:block; width:0; height:0; position:absolute; left:121px; top:...
  • xiao1215fei
  • xiao1215fei
  • 2015-04-19 20:23:23
  • 4108

用css的border属性画三角形

在网上你可以随意搜到很多用css的border属性画的图形,比如面包屑导航、三角形等等,画这些图形可能结合了css的伪类:before 、 :after等,当然也可能没有,这并不影响我今天要分享的,当...
  • viciousDear
  • viciousDear
  • 2016-11-03 14:25:45
  • 1143

用html,css制作一个三角形

用html,css制作一个三角形。 三角形 .triangle { width: 0; height: ...
  • zjgyb37
  • zjgyb37
  • 2017-10-15 10:18:09
  • 1420

用CSS代码绘制三角形 纯CSS绘制三角形的代码

这段时间想用css写出如下的三角形 经查阅可以使用div的border实现,将div的高度和宽度设置为0然后设置该div的border的大小,和颜色即可显示出如图的样式 1、新建一个元...
  • personbing
  • personbing
  • 2016-06-19 19:45:48
  • 876

三种纯CSS实现三角形的方法

转载:http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html 看到像上图这样的 tip 的小三...
  • huanghui8030
  • huanghui8030
  • 2013-11-27 14:09:04
  • 8397

CSS实现实心三角形和空心三角形

一次开发中遇到,记录代码 原理: 1.给一个div,宽和高都为0的时候,盒子什么都没有看起来。为空白 2.给一个宽高为0的盒子给一遍像素给100px的上边,下边和右边, border-top: 90...
  • qq_34645412
  • qq_34645412
  • 2017-09-22 14:05:03
  • 9670

HTML之CSS画三角形原理

CSS画三角形原理
  • pengjunlee
  • pengjunlee
  • 2016-11-01 23:54:42
  • 12173
    个人资料
    等级:
    访问量: 6077
    积分: 246
    排名: 31万+