html画一个倒三角,css 三角形画法

css 三角形画法

项目中,会有一些边角的位置使用的三角形的地方,这时候如果没有刻意改变,可使用 css 来实现。

使用 border 实现三角形的画法:

triangle 实现

#triangle-up{ //向上三角形样式

width:0px;

height:0px;

border-left:50px solid transparent;

border-right:50px solid transparent;

border-bottom:60px #f00 solid;

}

#triangle-left{ //向左三角形样式

width:0px;

height:0px;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-right:60px #0f0 solid;

}

#triangle-right{ //向右三角形样式

width:0px;

height:0px;

border-top:50px solid transparent;

border-bottom:50px solid transparent;

border-left:60px #00f solid;

}

#triangle-down{ //向下三角形样式

width:0px;

height:0px;

border-left:50px solid transparent;

border-right:50px solid transparent;

border-top:60px #f00 solid;

}

说明:(以向上三角形事例说明)

html元素可以是块级元素,也可以是行级元素、行内元素;

css 样式中, 类似将border分成了上下左右四块,每个三角形的实现都只用了三部分,另外一部分的样式则为 0;

css样式中,缺少的那一部分的对立样式(如上对应下,左对应右),则为设置三角形的高度和方向,其中高度的增加方向,是从尖头向平头的方向增加,而颜色则为三角形的背景色;

小小的积累,成就大大的收获!!!

标签:画法,solid,50px,三角形,0px,border,transparent,css

来源: https://blog.csdn.net/qq_43344133/article/details/90340587

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值