轩枫阁

首页 / Web前端 / CSS / css的border属性绘制三角形

css的border属性绘制三角形

这个案例基于对boder属性的高级理解,他的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重叠处分45度角平分
为方便大家理解请看如下代码:

效果如下图所示:

css-border

这样是不是好理解多了呢?大家注意观察各个边框交界处。

下一步我们设置它的宽高为0在看一下效果:

css-border02

最后一步保留上边框颜色,其余边框颜色设置同背景色一样,这里为白色

css-border03

本文标题:css的border属性绘制三角形 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
433/470
435/470

相关阅读

文章评论

  • 学习到了…以前还以为是css3做出来的呢,非常感谢

    • 这个还是很有用处的,很多网站的下拉菜单都用上这个。三角形用图片不好,有点浪费资源的感觉,直接代码就可以。除了代码之外可以用字符来解决,比如说用◇、●之类的,再控制字体大小就是一个图形了

  • 原来如此、

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子