markdown CSS绘制三角形

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown CSS绘制三角形相关的知识,希望对你有一定的参考价值。

# CSS Draw Triangle

[SOURCE](https://www.w3schools.com/howto/howto_css_shapes.asp), [SOURCE](https://css-tricks.com/snippets/css/css-triangle/)

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

```css
.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
```

Example of triangles at corner like this:

![Imgur](https://i.imgur.com/Ifz0BUx.png)

```css
#bottom-container {
  position: relative;
  background-color: $color_blue;
  padding: 80px;
  overflow: hidden;

  .triangle-base-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }

  .triangle-dark-top {
    @extend .triangle-base-top;
    border-top: 0 solid $triangle-blue-dark;
    border-left: 700px solid $triangle-blue-dark;
    border-bottom: 100px solid transparent;
  }

  .triangle-light-top {
    @extend .triangle-base-top;
    border-top: 0 solid $triangle-blue-light;
    border-left: 700px solid $triangle-blue-light;
    border-bottom: 200px solid transparent;
  }

  .triangle-base-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
  }

  .triangle-dark-bottom {
    @extend .triangle-base-bottom;
    border-top: 100px solid transparent;
    border-bottom: 0 solid $triangle-blue-dark;
    border-right: 700px solid $triangle-blue-dark;
  }

  .triangle-light-bottom {
    @extend .triangle-base-bottom;
    border-top: 200px solid transparent;
    border-bottom: 0 solid $triangle-blue-light;
    border-right: 700px solid $triangle-blue-light;
  }
}
```

以上是关于markdown CSS绘制三角形的主要内容,如果未能解决你的问题,请参考以下文章

CSS中使用border属性来绘制三角形

CSS中使用border属性来绘制三角形

css CSS绘制三角形

css CSS绘制三角形

css CSS绘制三角形

怎么利用CSS3绘制三角形