用最少 CSS 代码实现

Question

我想用最少的 CSS 代码实现图片... 我该怎么办？

Answer 1

没有javascript你可以这样做

<style>
    .row {
        width: 250px;
    }   
    .divSquare {
        width: 50px;
        height: 50px;
        float: left;
    }   
    .red {
        background-color: red;
    }   
    .blue {
        background-color: blue;
    }   
    .green {
        background-color: green;
    }
</style>

<html>
<head>
    <title></title>
</head>
<body>
    <div class="row">
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
    </div>
    <div class="row">
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
    </div>
    <div class="row">
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare red"></div>
    </div>
    <div class="row">
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
        <div class="divSquare green"></div>
        <div class="divSquare blue"></div>
    </div>
</body>

</html>

Answer 2

最低 CSS？我认为既然你不能少于没有 CSS 没有任何 CSS 的解决方案将是你的绝对最小值。

就是这样，感谢糟糕的网络编程的美好时光；）

<table width="250" height="200" border="0">
  <tr>
    <td>
      <table width="50" height="50" bgcolor="#ff00ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#ff00ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#ff00ff"></table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#00ff00"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#00ff00"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="50" height="50" bgcolor="#ff00ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#ff00ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#ff00ff"></table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#00ff00"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#00ff00"></table>
    </td>
    <td>
      <table width="50" height="50" bgcolor="#0000ff"></table>
    </td>
  </tr>
</table>

Answer 3

使用线性渐变。

body {
  background:  
              linear-gradient(45deg, blue 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, blue 25%, rgba(0,0,0,0) 26%),
              linear-gradient(45deg, green 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, green 25%, rgba(0,0,0,0) 26%),
              linear-gradient(45deg, magenta 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, magenta 25%, rgba(0,0,0,0) 26%),
              linear-gradient(45deg, blue 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, blue 25%, rgba(0,0,0,0) 26%);
              
  background-position: 0 0,    25px 25px, 25px 50px, 100px 75px,
                       0 25px, 25px 50px, 25px 75px, 100px 100px;
  background-size: 50px 50px;
}

用最少 CSS 代码实现

Implement with minimum CSS code

html

css

division