手mo手画正反三角形

不废话直接上图、上代码.

1.利用”◆“字符实现三角形

2.还可以利用 CSS3 transfrom 旋转 45 度实现三角形.

3.今天用的是用border+transparent来实现.

<div class="down"></div>
<style>
.down {
      margin-top: 50px;
      margin-left: 100px;
      width: 0;
      height: 0;
      border-style: solid;
      /* 正三角形 */
      border-width: 0 40px 40px 40px;
      border-color: transparent transparent rgb(245, 129, 127) transparent;
      /* 倒三角 */
      /* border-width: 40px 40px 0 40px;
      border-color:  rgb(245, 129, 127) transparent transparent transparent; 
      */
      /* 向右  */
      /* 
      border-width:  40px 0 40px 40px;
      border-color: transparent  transparent transparent rgb(245, 129, 127);
      */
      /* 向左 */
      /*
      border-width: 40px 40px 40px 0;
      border-color: transparent rgb(245, 129, 127)  transparent transparent;
      */
  }
</style>

/* 右下 */
  /*
  border-width: 40px  40px 0 40px ;
  border-color: transparent rgb(245, 129, 127)  transparent transparent;
  */
  /*右上 */
  /*
  border-width:0 40px 40px  40px;
  border-color: transparent rgb(245, 129, 127)  transparent transparent;
  */
  /*左上 */
  /*
  border-width: 0 40px 40px 40px; 
  border-color: transparent transparent transparent rgb(245, 129, 127) ;
  */
  /* 左下 */
  /*
  border-width: 40px 40px 0 40px;
  border-color: transparent transparent transparent rgb(245, 129, 127) ;
  */

资料：

1.Border的形成原理： 四个边框以斜角的形式在盒子的周围。 当盒子宽高为0的时候，四边以三角形的形式进行相接。如果说只有一个边框宽度存在的时候，并且盒子没有高度，则这个边框不会显示。所以必须有两个边框宽度存在并且边框相邻，才会显示。

transparent：指定透明度，相当于rgba（0,0,0,0）。  background-color的默认值。（版本更新：background-color属性(css1中的一个参数值)=>border-color属性(css2中的参数值)=>用于任何带有color的属性）。