手mo手画正反三角形

手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的时候，四边以三角形的形式进行相接。如果说只有一个边框宽度存在的时候，并且盒子没有高度，则这个边框不会显示。所以必须有两个边框宽度存在并且边框相邻，才会显示。

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