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

最新推荐文章于 2024-11-08 10:30:00 发布

꧁专治疑难杂症 ꧂

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量351

点赞数 2

分类专栏：学习前端文章标签： html html5 css3

本文链接：https://blog.csdn.net/youknow156/article/details/107304364

版权

学习同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

三角形

这里三角用法比较多：

自己总结了一个口诀：

等腰三角：相对角色

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

从代码可以看出上边为 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>