0

0

0

修罗

站点介绍

只有了解事实才能获得真正的自由

CSS三角形之美

修罗 2020-09-10 1402 0条评论 DIV+CSS

首页 / 正文
div {
  width: 0; 
  height: 0;
  line-height:0;
  font-size: 0;

  border-top: 10px solid red;

  border-right: 10px solid green;

  border-bottom: 10px solid blue;

  border-left: 10px solid #000; 

}

一张图, 你就知道 css 三角是怎么来的了, 做法如下:

arr.png

  1. 我们用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

评论(0)


最新评论

  • 1

    1

  • 1

    1

  • -1' OR 2+158-158-1=0+0+0+1 or 'TKCTZnRa'='

    1

  • 1

    1

  • 1

    1

  • 1

    1

  • 1

    1

  • @@5Qa2D

    1

  • 1

    1

  • 1

    1

日历

2025年09月

 123456
78910111213
14151617181920
21222324252627
282930    

文章目录

推荐关键字: Linux webpack js 算法 MongoDB laravel JAVA jquery javase redis