search

zlx362211854 / daily-study

每日一个知识点总结，以issue的形式体现
10 stars 6 forks source link

4. Draw a triangle with css #18

Open goldEli opened 5 years ago

goldEli commented 5 years ago

zlx362211854 commented 5 years ago

css三角关键在border的绘制： 先画一个width，height都为0的div,然后给他的四个边都加上一个粗实线。

<div class="triangel"></div>
    .triangel {
      width: 0;
      height: 0;

      border-top:50px solid red;
      border-right:50px solid yellow;
      border-bottom:50px solid blue;
      border-left:50px solid indigo;
    }

效果是这样的： image 就构成了4个不同方向的三角形。 需要哪个三角形，就把其他方向的border的颜色透明度设置为0，比如我要左边的这个三角形，就把上，下，右边透明度设置为0:

    .triangel {
      width: 0;
      height: 0;

      border-top:50px solid rgba(0,0,0,0);
      border-right:50px solid rgba(0,0,0,0);
      border-bottom:50px solid rgba(0,0,0,0);
      border-left:50px solid indigo;
    }

效果看起来就是： image

goldEli commented 5 years ago

大体思路：

  1. 创建一个 div，宽高相等，再单独设置上下左右的 border

1

  1. 将 div 的宽高设为 0

1564105116503

  1. 将上左右的 border 颜色设置成 transparent，就得到一个向上的三角形了

1564105157614

最终代码如下：

    .triangle_to_top{
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid blue;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
    .triangle_to_left{
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid red;
    }
    .triangle_to_right{
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;

      border-left: 10px solid green;
    }
    .triangle_to_bottom{
      width: 0; 
      height: 0; 
      border-top: 10px solid brown;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
    <div class="triangle_to_top"></div>
    <div class="triangle_to_right"></div>
    <div class="triangle_to_bottom"></div>
    <div class="triangle_to_left"></div>

Reference: CSS Triangle

roxy0724 commented 5 years ago

css画三角形，首先想到的就是border，另外还有transparent属性。

 .triangle {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid skyblue;
        }

效果如图 image