用css制作三角，和多边形，练练手

作者: 悟空去找三女妖精一路向西
来源: 51数据库
2021-08-22

三角形

这里三角用法比较多：

自己总结了一个口诀：

等腰三角：相对角色? ?

直角三角形：更改左右大小即可掌握三角形制作即可制作其他三角形状

从代码可以看出上边为? 0px? ?
?上边对应底边颜色为红色?
其他边的颜色为透明色? 其他边的大小为150px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>等腰三角</title>
  </head>
  <body>
    <style>
      div {
        width: 0;
        height: 0;
        border-style: solid;
         border-width: 0 150px 150px 150px;
        /* 上         右      下       左 */
        border-color: transparent transparent red transparent;
       
      }
    </style>
    <div></div>
  </body>
</html>

这里就直接再制作一个八边形其他都是一个道理

效果图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>八边形</title>
  </head>
  <body>
    <style>
      
      div {
        width: 100px;
        height: 0;
        border-width: 0 71px 71px;
        border-style: solid;
        border-color: transparent transparent pink;
        position: relative;
      }
      div::after {
        position: absolute;
        top: 70px;
        left: -70px;
        content: "";
        width: 242px;
        height: 0;
        border-style: solid;
        border-width: 0px 0 94px;
        border-color: pink;
      }
      div::before {
        position: absolute;
        top: 164px;
        left: -70px;
        content: "";
        width: 100px;
        border-style: solid;
        border-width: 71px 71px 0;
        border-color: pink transparent transparent;
      }
    </style>
    <div></div>
  </body>
</html>

推荐阅读