CSS如何实现一个三角形呢?

 时间:2026-02-19 00:07:14

1、给一个小的盒子加一个很宽的边框,如下:<div id="triangle"></div>

CSS代码:

#triangle{

margin:0 auto;

width: 20px;

height: 20px;

border-left: 173.2px solid red;

border-top: 100px solid blue;

border-right: 173.2px solid green;

border-bottom: 100px solid black;

}

CSS如何实现一个三角形呢?

2、下面我们去掉盒子的宽度(都变为0),css如下:

#triangle{

margin:0 auto;

width: 0px;

height: 0px;

border-left: 173.2px solid red;

border-top: 100px solid blue;

border-right: 173.2px solid green;

border-bottom: 100px solid black;

}

CSS如何实现一个三角形呢?

3、由四个三角形组成的矩形就出来了。。。如果我们想要三角形只需要把其中的三个三角形(即边框)的颜色变为透明即可

#triangle{

margin:0 auto;

width: 0px;

height: 0px;

border-left: 173.2px solid transparent;

border-top: 100px solid transparent;

border-right: 173.2px solid green;

border-bottom: 100px solid transparent;

}

CSS如何实现一个三角形呢?

  • PS停止运行时怎么办??
  • PS亮化工具组之减淡工具
  • 怎么判断初创公司
  • 佳能(Canon)EOS 700D单反相机功能使用
  • 如何用ps画禁烟标志?
  • 热门搜索
    图片大全美女 家庭电视剧大全 东北大秧歌视频大全 腌黄瓜的做法大全 生日祝福语大全 手抄报的花边怎么画 孩子吐奶怎么办 床吻戏视频大全 黄漫画大全 美女黄频视频大全免费的