CSS 墙自下而上

Question

我正在尝试仅使用 CSS 创建墙壁图案。这堵墙应该像现实生活中的墙一样自下而上生长。多亏了 Flex，我才做到了这一点。我现在正在尝试以不均匀的方式排列 div，使其更加真实。像这样（我知道有 JavaScript 解决方案，但是我是否可以只使用 CSS 来实现这一点？

body {
  display: flex;
  min-height: 100%;
  background: #f8f8f8;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  /*display: grid;
  grid-gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-item {
  background: blue;
  padding: 5px;
  width: 100px;
  height: 30px;
  margin: 10px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

<ul class="flex-container wrap-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
  <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
  <li class="flex-item">16</li>
  <li class="flex-item">17</li>
  <li class="flex-item">18</li>
  <li class="flex-item">19</li>
  <li class="flex-item">20</li>
  <li class="flex-item">21</li>
  <li class="flex-item">22</li>
  <li class="flex-item">23</li>
  <li class="flex-item">24</li>
  <li class="flex-item">25</li>
  <li class="flex-item">26</li>
  <li class="flex-item">27</li>
  <li class="flex-item">28</li>
  <li class="flex-item">29</li>
  <li class="flex-item">30</li>
  <li class="flex-item">31</li>
  <li class="flex-item">32</li>
  <li class="flex-item">33</li>
  <li class="flex-item">34</li>
  <li class="flex-item">35</li>
  <li class="flex-item">36</li>
  <li class="flex-item">37</li>
  <li class="flex-item">38</li>
  <li class="flex-item">39</li>
  <li class="flex-item">40</li>
  <li class="flex-item">41</li>
  <li class="flex-item">42</li>
  <li class="flex-item">43</li>
  <li class="flex-item">44</li>
  <li class="flex-item">45</li>
  <li class="flex-item">46</li>
  <li class="flex-item">47</li>
  <li class="flex-item">48</li>
  <li class="flex-item">49</li>
  <li class="flex-item">50</li>
  <li class="flex-item">51</li>
  <li class="flex-item">52</li>
  <li class="flex-item">53</li>
  <li class="flex-item">54</li>
  <li class="flex-item">55</li>
  <li class="flex-item">56</li>
  <li class="flex-item">57</li>
  <li class="flex-item">58</li>
  <li class="flex-item">59</li>
  <li class="flex-item">60</li>
  <li class="flex-item">61</li>
  <li class="flex-item">62</li>
  <li class="flex-item">63</li>
  <li class="flex-item">64</li>
  <li class="flex-item">65</li>
  <li class="flex-item">66</li>
  <li class="flex-item">67</li>
  <li class="flex-item">68</li>
  <li class="flex-item">69</li>
  <li class="flex-item">70</li>
  <li class="flex-item">71</li>
  <li class="flex-item">72</li>
  <li class="flex-item">73</li>
  <li class="flex-item">74</li>
  <li class="flex-item">75</li>
  <li class="flex-item">76</li>
  <li class="flex-item">77</li>
  <li class="flex-item">78</li>
  <li class="flex-item">79</li>
  <li class="flex-item">80</li>
  <li class="flex-item">81</li>
  <li class="flex-item">82</li>
  <li class="flex-item">83</li>
  <li class="flex-item">84</li>
  <li class="flex-item">85</li>
  <li class="flex-item">86</li>
  <li class="flex-item">87</li>
  <li class="flex-item">88</li>
  <li class="flex-item">89</li>
  <li class="flex-item">90</li>
  <li class="flex-item">91</li>
  <li class="flex-item">92</li>
  <li class="flex-item">93</li>
  <li class="flex-item">94</li>
  <li class="flex-item">95</li>
  <li class="flex-item">96</li>
  <li class="flex-item">97</li>
  <li class="flex-item">88</li>
  <li class="flex-item">99</li>
  <li class="flex-item">100</li>

</ul>

Answer 1

您也可以使用它background: linear-gradient。用更少的代码。

希望这可以帮助 ：）

div {
    width:100%;
    height:100vh;
    display:inline-block;
    background: linear-gradient(163deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(161deg, transparent 0px, #181818 1px, #222 2px, #222 15px, transparent 15px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px);
    background-color: #585858;
    background-position: 2px 1px, 23px 16px,48px 15px, 21px 30px;
    background-size: 48px 30px;
}

<div></div>