欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS之border绘制三角形

程序员文章站 2022-06-23 23:44:14
用CSS的border可以画出高质量的三角形。 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px solid orange; } ......

用css的border可以画出高质量的三角形。

我们一般会这么使用border:

 

#test-border {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background: #fff;
    border: 2px solid orange;
}
  

得到的效果如下:

CSS之border绘制三角形

 

 

 

 因为我们一般设的border-width都很小,导致很多童鞋以为border是四个矩形,然而其实并不是,我们把content的宽度变小,border-width增大,并涂上不同的颜色,更改代码如下:

#test-border {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background: #fff;
    border: 30px solid;
    border-color: green orange;
}

  效果如下:

  CSS之border绘制三角形

 

 

 

  那么把width和height设为0,就可以得到四个三角形:

  CSS之border绘制三角形

 

注意,这里的border-width指的是外边界到中心点的垂直距离!即如上图所示。 

  border-width设置值方式如下:

    1,设一个值:为四个方向;

    2,设两个值:上下--左右;

    3,设三个值:上--左右--下;

    4,设四个值:上--右--下--左。

  

  比如现在我们需要一个底边长100px,高60px的正摆放三角形,根据以上知识,可推算如下:

     1,  正向三角形:顶部的border-width为0, 顶部和左右的颜色都为transparent;

    2,底边长100px = 左右的border-width各为50px;

    3,高60px = border-bottom的width为60px;

  故改写代码如下:

  

#test-border {
    width: 0;
    height: 0;
    margin: 100px auto;
    border-width: 0 50px 60px;
    border-color: transparent transparent orange;
    border-style: solid;
}

  结果如下:

  CSS之border绘制三角形

 

 

  CSS之border绘制三角形