用css的border属性画三角形

原创 2016年11月03日 14:25:45

在网上你可以随意搜到很多用css的border属性画的图形,比如面包屑导航、三角形等等,画这些图形可能结合了css的伪类:before 、 :after等,当然也可能没有,这并不影响我今天要分享的,当初作为新手的我看到这些代码觉得很神奇但并不能理解,今天,在相对理解的基础上我自己画出了这些三角形更是觉得神奇于是来分享。

首先我们看一个三角形
三角形

想象它是由一个正方形变来的,如何变呢,先来看看这个正方形
正方形

为了解释的更加清晰,我们给正方形的四个角标上记号
正方形

假设DC边,也就是底边,不在了,然后我们将DC两个点连起来,先假设他们的结合点在曾经DC边的终点上,你看,我们是不是得到了一个三角形 ?
转换

我们的三角形大致是用了这个原理,当然不是上图的这种转换,我们让一个 width 和 height 都为0的div,通过border来画这个三角形,如果需要画一个箭头向下的三角形,是不是让底边的border消失就好了呢 ? 同时,只给顶部的border一个颜色,其他的border都为透明色transparent
解释1

为了观察清楚原div,我们先还原一部,假设所有的border的color为red
然后看看这个div
解释

依次改变border的color就会看清每个border
然后根据需要显示对应的border-color就好了
bottom

right

left

然后根据需要我们就可以画出自己想要的图形
这里写图片描述

以下是画三角形的css代码参考

        .arrow-down{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 0 30px;
            border-color: transparent;
            border-style: solid;
            border-top-color: red;

        }
        .arrow-up{
            width: 0px;
            height: 0px;
            border-width: 0 30px 30px 30px;
            border-color: transparent;
            border-style: solid;
            border-bottom-color: red;


        }
        .arrow-left{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 0px;
            border-color: transparent;
            border-style: solid;

            border-right-color: red;
        }
        .arrow-right{
            width: 0px;
            height: 0px;
            border-width: 30px 0 30px 30px;
            border-color: transparent;
            border-style: solid;
            border-left-color: red;

        }

        .triangle-upright{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-left-color: transparent;
            border-bottom-color: transparent;

        }

        .triangle-upleft{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-right-color: transparent;
            border-bottom-color: transparent;

        }

        .triangle-downright{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-left-color: transparent;
            border-top-color: transparent;

        }

        .triangle-downleft{
            width: 0px;
            height: 0px;
            border-width: 30px 30px 30px 30px;
            border-color: rebeccapurple;
            border-style: solid;
            border-right-color: transparent;
            border-top-color: transparent;

        }

纯CSS写三角形-border法

参考文章: http://www.cnblogs.com/blosaa/p/3823695.html(1)有边框的三角形 我们来写下带边框的三角形。如果是一个正方形,我们写边时,会用到border...
  • xyr05288
  • xyr05288
  • 2017年01月10日 11:24
  • 456

5分钟彻底搞懂Border画多边形原理

在网上看到大神用border属性来讲div变成三角形,梯形等等各种形状。也详细解释了原理,我看了半天也弄懂了。接下来这篇我希望能用5分钟让前端小白们毫无压力的彻底理解这个原理,这样以后要用的时候也不懂...
  • Creabine
  • Creabine
  • 2016年07月01日 18:22
  • 1990

用css画三角形(提示框三角形)

三角形使用情形 经常用于提示框,下拉菜单等(csdn也很多用到,最后一图),看图:由于在网页中经常要用到,所以特地研究 图片实现(感觉low)、svg实现(小题大作了),所以最后还是css画比较不错,...
  • hope_It
  • hope_It
  • 2017年04月18日 00:09
  • 543

巧用border写三角形(border形状)

border问题
  • WDS13701239193
  • WDS13701239193
  • 2016年09月08日 09:47
  • 151

CSS border实现三角形

一、原理 CSS盒模型 一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得...
  • cui_angel
  • cui_angel
  • 2012年12月14日 15:02
  • 5226

使用border 画三角形

使用CSS 的border实现各种三角形的效果
  • cvper
  • cvper
  • 2016年12月17日 12:33
  • 307

纯CSS写三角形-border法[基础篇]

注意:所有知识点将不考虑IE6 ( ̄▽ ̄")     在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者...
  • younger_z
  • younger_z
  • 2014年08月07日 21:12
  • 2423

利用border写一个小三角形

width: 0; height: 0; left: 50%; margin-left: -5px; top: -10px; border-width: 5px; border-color: #E3E...
  • sibaoguoying
  • sibaoguoying
  • 2017年10月24日 04:59
  • 67

用css的border属性画三角形

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

用CSS border相关属性画三角形

用border属性画三角形
  • kiwi_coder
  • kiwi_coder
  • 2014年08月16日 09:19
  • 1578
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用css的border属性画三角形
举报原因:
原因补充:

(最多只允许输入30个字)