CSS 实现三角形

将一个div的宽度和高度设置为0,然后设置边框样式

.triangle{
  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid red;
  border-bottom: 50px solid green;
  border-left: 50px solid blue;
}


将一个div的border都设置成50px粗,并且不同颜色,结果如下图所示:

把边框宽度设置成50px,计算机处理时,在边框交接处,一边占用一半的面积。



将左右下边框设置成transparent,就可以画出一个三角形

.triangle{
  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}

/*下面代码更加简洁*/
.triangle{
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: black ;
}


结果如下图所示:



将下边框的长度设置为0,实现一个最小空间的三角形


上面产生的三角形,实质上占位还是一个正方形,所以我们应该将这个三角形占用的空间尽可能缩小。不设置下边框

.triangle{
  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}


这样就可以实现高度为50px,宽度为100px的三角形。


 同理,可以画出各种三角形:



 来源:

https://www.cnblogs.com/gg-qq/p/11138141.html

真诚赞赏,手留余香
赞赏
随机推荐
为什么 PDO 无法捕获异常
CentOS 7 编译安装 Nginx,Naxsi Waf 和 PHP 手记
阐述二维码的原理以及使用google api和PHP QR Code来生成二维码
CSS3 实现瀑布流布局
webpack-dev-server 无法通过ip访问
Node.js 的图片处理模块 images 跨平台图像编解码库
基于RTMP协议的Flash流媒体网页直播播放器
PHP curl的GET和POST
jQuery自定义函数
CentOS 时间命令 timedatectl