0

0

0

修罗

站点介绍

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

CSS三角形之美

修罗 2020-09-10 1488 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

日历

2026年01月

    123
45678910
11121314151617
18192021222324
25262728293031

文章目录

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