用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;
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 使用CSS绘制三角形的方法之一是使用"border"属性。 例如:div { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid red; } ### 回答2: 要用CSS出一个三角形,可以通过调整元素的宽度、高度和边框来实现。 一个常用的方法是使用边框来画出三角形。 首先,创建一个具有零宽度和高度的`div`元素,并设置其边框的颜色和样式。例如: ```css .triangle { width: 0; height: 0; border-left: 50px solid transparent; //设置左侧边框颜色为透明 border-right: 50px solid transparent; //设置右侧边框颜色为透明 border-bottom: 50px solid red; //设置底部边框颜色为红色 } ``` 在这个例子中,设置了一个宽度和高度为零的`div`元素,并通过设置边框的颜色和样式来画出一个红色的三角形。 你可以根据需要,调整`width`、`height`和边框的颜色和样式来得到不同形状和颜色的三角形。 此外,还有其他通过旋转或使用伪元素`before`和`after`等方式来实现三角形的方法,但使用边框是最常见和简单的方法之一。 通过以上的CSS代码,你可以在HTML中使用`<div class="triangle"></div>`来创建一个三角形,然后根据需要在页面上进行样式调整。 ### 回答3: 要用CSS出一个三角形,可以使用CSS的border属性来实现。下面是一个简单的方法: 1. 创建一个元素,可以是div、span或其他块级或内联元素。 2. 设置元素的宽度和高度为0像素。 3. 设置元素的边框样式和颜色。 4. 使用border-width属性设置三角形的大小。将左边和右边边框的宽度设置为0,将下边边框的宽度设置三角形的高度,例如10像素。 5. 设置边框的颜色和样式。 6. 通过旋转元素来调整三角形的方向。可以使用transform属性的rotate()函数,例如rotate(45deg),将元素以45度的角度顺时针旋转。 示例代码如下: ``` <style> .triangle { width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; /* 上、右、下、左 */ border-color: transparent transparent #000 transparent; /* 上、右、下、左 */ transform: rotate(45deg); } </style> <div class="triangle"></div> ``` 在这个示例中,通过设置border-width属性的四个参数来定义三角形的大小和形状。通过设置border-color属性来定义边框的颜色,其中左边和右边的颜色设置为透明,使得只有底边的颜色是可见的。通过transform属性的rotate()函数来旋转元素,使得三角形以45度的角度旋转。 通过调整border-width的参数值、border-color的颜色值,以及transform的旋转角度,可以根据需要来调整三角形的样式和形状。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值