纯css实现三角形--详细原理

利用css可以实现各种样式的三角形

实现效果

在这里插入图片描述

代码如下:
<head>
  <meta charset="UTF-8">
  <title>css实现三角形</title>
  <style>
    #tran{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }
  </style>
</head>
<body>
  <div id="tran"></div>
</body>
  1. 实现原理
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      //div盒子的内容区宽高设置为0。隐藏掉其中三条边的边框
      //剩余一条边框设置宽度以及颜色
  1. 隐藏利用transparent属性
      border-right: 50px solid transparent;
      //利用这个属性,可以把必要的边框隐藏掉
      //transparent代表着全透明黑色,类似一个rgba(0,0,0,0)这样的值
      background-color:transparent;
      //这样就代表着背景透明
  1. 扩展深入其原理:
    在这里插入图片描述
    #full{
      width:50px;
      height:50px;
      border-width:20px;
      border-style:solid;
      border-color:#e66161 #f3bb5b red #85bfda;
      //上图对应width和height从50px--25px--0px 三个变化过程
      //可见内容区大小变成0后,整个图形由四个border撑起,为四个三角形构成
    }
  1. 所以,我们想要任意一个三角形都可以通过设置其他三个边框的颜色transparent和保留其中一个的颜色以及宽度就可以。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页