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

Ajiia 2021-01-27 22:05:35

文章标签： css css3 html

最后发布:2021-01-27 22:05:35首次发布:2021-01-27 22:05:35

本文链接：https://blog.csdn.net/czj1049561601/article/details/113275102

版权

利用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>

实现原理

      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      //div盒子的内容区宽高设置为0。隐藏掉其中三条边的边框
      //剩余一条边框设置宽度以及颜色

隐藏利用transparent属性

      border-right: 50px solid transparent;
      //利用这个属性，可以把必要的边框隐藏掉
      //transparent代表着全透明黑色，类似一个rgba(0,0,0,0)这样的值
      background-color:transparent;
      //这样就代表着背景透明

扩展深入其原理：

    #full{
      width:50px;
      height:50px;
      border-width:20px;
      border-style:solid;
      border-color:#e66161 #f3bb5b red #85bfda;
      //上图对应width和height从50px--25px--0px 三个变化过程
      //可见内容区大小变成0后，整个图形由四个border撑起，为四个三角形构成
    }