css实现各种形状，三角形、切角、梯形、五边形、六边形、八边形、五角星

最新推荐文章于 2023-08-15 10:07:30 发布

卷尾猫

最新推荐文章于 2023-08-15 10:07:30 发布

阅读量1.6k

点赞数 1

分类专栏： css 文章标签： html5 css css3 html

本文链接： https://blog.csdn.net/qq_41244810/article/details/104802860

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果如下：

代码如下，注释很清晰。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>形状</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      display: inline-block;
    }

    /* 三角形start */
    .traingle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid yellowgreen;
    }

    /* 三角形 end */
    .mt-40 {
      margin-top: 40px;
    }

    /* .demo {
      background: green;
      width: 40px;
      height: 40px;
      padding: 40px;
      margin: 40px;
      border: 20px solid red;
    } */

    h1 {
      font-size: 24px;
      display: inline-block;
    }

    /* 切角 start */
    .notching {
      width: 40px;
      height: 40px;
      padding: 40px;
      background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
        linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
        linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
        linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
    }

    /* 切角 end */
    /* 矩形两侧构造两个三角形就是梯形 */
    .traoezoid {
      position: relative;
      width: 60px;
      border-top: 60px solid yellowgreen;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
    }

    /* 利用伪元素加旋转透视实现梯形 */
    .traoezoid-second {
      position: relative;
      width: 60px;
      padding: 60px;
    }

    .traoezoid-second::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: perspective(20px) scaleY(1.3) rotateX(5deg);
      transform-origin: bottom;
      background: yellowgreen;
    }

    /* 梯形加上三角形 */
    .pentagon {
      position: relative;
      width: 60px;
      border-bottom: 60px solid yellowgreen;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
    }

    .pentagon::before {
      content: "";
      position: absolute;
      top: 60px;
      left: -40px;
      border-top: 60px solid yellowgreen;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
    }

    /* 六边形 */
    .hexagon {
      position: relative;
      width: 60px;
      border-bottom: 60px solid yellowgreen;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
    }

    .hexagon::before {
      content: "";
      position: absolute;
      width: 60px;
      height: 0px;
      top: 60px;
      left: -40px;
      border-top: 60px solid yellowgreen;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
    }

    /* 八边形 */
    .octagon {
      position: relative;
      width: 40px;
      height: 100px;
      background: yellowgreen;
    }

    .octagon::before {
      content: "";
      height: 60px;
      position: absolute;
      top: 0;
      left: 40px;
      border-left: 30px solid yellowgreen;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }

    .octagon::after {
      content: "";
      height: 60px;
      position: absolute;
      top: 0;
      left: -30px;
      border-right: 30px solid yellowgreen;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }

    /* 3个三角形叠加旋转在一起实现 */
    .star {
      margin: 50px 0;
      position: relative;
      width: 0;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellowgreen;
      border-left: 100px solid transparent;
      transform: rotate(35deg) scale(.6);
    }

    .star:before {
      content: '';
      position: absolute;
      border-bottom: 80px solid yellowgreen;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      top: -45px;
      left: -65px;
      transform: rotate(-35deg);
    }

    .star:after {
      content: '';
      position: absolute;
      top: 3px;
      left: -105px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellowgreen;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
    }
  </style>
</head>

<body>

  <h1>三角形</h1>
  <div class="traingle">
  </div>
  <h1>切角</h1>
  <div class="notching mt-40"></div>
  <h1>梯形1</h1>
  <div class="traoezoid"></div>
  <h1>梯形2</h1>
  <div class="traoezoid-second"></div>
  <h1>五边形</h1>
  <div class="pentagon"></div>
  <h1>六边形</h1>
  <div class="hexagon"></div>
  <hr class="mt-40">
  <h1>八边形</h1>
  <div class="octagon"></div>
  <h1>五角星</h1>
  <div class="star"></div>
</body>

</html>