1.CSS几何旋转----等边三角形

最新推荐文章于 2024-04-10 18:17:09 发布

Summer丶羽

最新推荐文章于 2024-04-10 18:17:09 发布

阅读量464

点赞数

分类专栏： DIV特效文章标签： css特效 loading DIV 前端 animation

本文链接：https://blog.csdn.net/qq_42779222/article/details/99671836

版权

本文介绍了如何利用CSS来制作等边三角形，包括两种不同的效果。第一种通过控制旋转角度和缩放大小，使内部三角形贴合外层三角形边缘。第二种方法则是确保每个内部div接触最外层div，同样调整旋转和缩放。详细代码展示在文章中。

摘要由CSDN通过智能技术生成

1.效果图：

在这里插入图片描述

2.HTML代码：

<body>
  <div class="loading">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
  </div>
</body>

3.思路：

先利用css绘制出等边三角形，可以利用border来实现或者利用rotate旋转一定的度数，然后超出部分hidden来实现。本文利用的是border来实现的，利用border-top相当于三角形的高，border-left、border-right相当于三角形的边长的一半，高度需要自己动态计算（js控制也可以，高度为根号3/2*边长）。
内部每层的三角形大小，需要控制其rotate的角度和scale的大小，从而使内部三角形的大小刚好贴合外层三角形的边上。（效果一）
如果控制内部每层的div刚好接触最外层的div，同样也是控制其rotate的角度和scale的大小。（效果二）

4.1.效果一的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body{
      height: 100%;
      width: 100%;
      font-family: 'Open Sans';
      background: #f2f2f2;
      font-weight: 100;
      color: #181818;
      font-size: 100%;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .loading{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 500px;
      height: 500px;
      overflow: hidden;
      background: #f2f2f2;
    }
    .div{
      position: absolute;
      left: 100px;
      to