9-3 CSS三角之美

9-3 CSS三角之美

 

 

<div></div>    html代码

div {
     width: 0;
     height: 0;  
     border-top: 10px solid red;
     border-right: 10px solid green;    css代码
     border-left: 10px solid blue;
     border-right: 10px solid pink; 
}

 

9-3 CSS三角之美

 

<div></div>        html代码

div {
      width: 0;
      height: 0;
      border-style: solid;                                                 css代码
      border-width: 10px;
      border-color:  red transparent transparent transparent;  
}

 

主要是靠的border分开来写的那些属性,最重要的我觉得就是border-color能指定上右下左,这样想要哪个三角形,在border-color里换换位置就行了。

 

总结一下

  1. 可以用css 的边框样式来模拟三角效果
  2. 把宽高设置为0;
  3. 4个边框的边框样式都要写,然后边框颜色只保留需要的,其他的颜色写透明也不能省略(要不就不显示了!);
  4. 为了兼容性可以考虑加上font-size: 0; line-height: 0

 

上一篇:CSS 之 Position 属性


下一篇:2021-01-26