Question

我的想法是制作一个像矩形的主要形状。在这个矩形内部，我想在每次刷新时都有三角形，立方体等随机形状。这可能是CSS还是我需要一个js脚本？

Answer 1

您需要使用脚本包含“随机类”生成器。例如。下面是“如何在每次加载时为div分配随机类”的简短示例。基础是这样的：

$(document).ready(function() {
  function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);

  }
  var x = randomIntFromInterval(1, 3);
  var myclass;
  switch (x) {
    case 1:
      myclass = "classOne";
      break;
    case 2:
      myclass = "classTwo";
      break;
    case 3:
      myclass = "classThree";
      break;
  };
  $('div').addClass(myclass);
});

div {
  height: 300px;
  width: 300px;
  position: relative;
}
.classOne { /*simple square*/
  background: red;
}
.classTwo { /*simple triangle*/
  background: transparent;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  height: 0;
  width: 0;
  border-bottom: 300px solid blue;
}
.classThree { /*simple circle*/
  background: green;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

<强>说明

多次点击'run snippet'以查看效果

每次加载文档时，都会使用switch语句将一个类随机添加到'div'。

注意

此示例使用三个可能的类，但可以通过以下方式增加：

在此处增加最大变量：randomIntFromInterval(1, 3);

在switch语句中添加额外的用例：case 4:，其中4是函数返回的可能值

在css中创建一个新类

将此myclass类名称添加到您的switch语句

在每次后续加载时，甚至可以分配给每个不同的值。

Answer 2

您最好尝试使用SVG而不是CSS生成形状。但是，是的，你需要JS来设置随机方面。

Answer 3

你必须使用JS。最好的选择是创建一个类数组，每个类表示不同的形状。然后，在每个页面加载时，将数组中的随机类分配给您选择的元素。但是，正如其他人所说，如果使用SVG生成形状会更好，而不是CSS。

每次刷新时生成CSS形状

3 个答案: