用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;

        }

相关文章推荐

问题解决——Group Box控件遮挡其他控件

一开始我在写一个小例子,界面显示效果是右边的样子。后来打算用别的方法实现下逻辑,又写了一个小例子,结果界面显示效果却是左面的样子。 当我看到界面效果不一样时,当时我就不乐意了,因为我的属性设置都是一样...
  • wlsgzl
  • wlsgzl
  • 2014年07月22日 15:06
  • 2899

qt 中窗口以及窗口部件背景图案的设置

1.在顶层窗口中设置背景图案,最好不用setStyleSheet,因为它不仅对顶层窗口无效,还会把子部件窗口设置为该样式,这不是我们想要的。使用QPalette是比较推荐的,这个可以参见博友文章htt...

不可思议的CSS border属性----纯CSS制作三角形

不可思议的CSS border属性----纯CSS制作三角形

结合整理的css用border画三角形的原理

http://www.cnblogs.com/blosaa/p/3823695.html http://blog.163.com/neusoft_hao@yeah/blog/static/1205...

CSS实现三角形的方法之一--利用 border 属性实现三角形

这个原理很简单,我我们先看下面的图,这是一个边框为 20px 的 div,看他的边框,是个梯形,变化会从这里开始。 CSS: .triangle{ width:30px...
  • hl_java
  • hl_java
  • 2017年04月12日 22:24
  • 166

css3-border属性实例.html

  • 2016年08月23日 17:37
  • 6KB
  • 下载

CSS使用Border属性内外嵌套的代码

  • 2010年07月20日 10:10
  • 519B
  • 下载

HTML border CSS输出三角形

HTML border CSS输出三角形
  • lgh06
  • lgh06
  • 2014年11月06日 09:51
  • 1625

如何使用纯CSS画出三角形之border法

如何用纯CSS画出三角形之border法:如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他...

纯CSS写三角形-border法

参考文章: http://www.cnblogs.com/blosaa/p/3823695.html(1)有边框的三角形 我们来写下带边框的三角形。如果是一个正方形,我们写边时,会用到border...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用css的border属性画三角形
举报原因:
原因补充:

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