同一div内响应式多三角形CSS实现及表格TD动态背景三角形响应式问询

Great question—this is totally achievable with modern CSS techniques, and we can break it down into two key parts: building responsive triangles, and adapting them to your dynamic table cells with custom colors. Let’s dive in.

1. Core: Responsive CSS Triangles #

First, the foundation: CSS triangles are created using the border property (since border edges render as trapezoids, making three sides transparent leaves you with a clean triangle). To make it responsive, use relative units (like %, vw, or CSS variables tied to parent dimensions) instead of fixed pixels.

For an equilateral triangle that scales with its container:

.triangle {
  width: 0;
  height: 0;
  /* Use percentage relative to parent width */
  border-left: 40% solid transparent;
  border-right: 40% solid transparent;
  /* Equilateral triangle height = (√3/2) * base width → ~69.28% of total base (80% here) */
  border-bottom: 69.28% solid var(--triangle-color, #333);
}

This triangle will automatically scale as its parent container grows or shrinks, no fixed sizes required.

2. Multiple Triangles in a Single Div #

To place multiple responsive triangles in one container, use responsive layout methods like CSS Grid or Flexbox to handle positioning and wrapping seamlessly:

.triangle-grid {
  display: grid;
  /* Auto-fit columns that shrink/grow, with a minimum size to prevent overflow */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.triangle-grid .triangle {
  justify-self: center;
  /* Adjust proportions while keeping relative units */
  border-left: 35% solid transparent;
  border-right: 35% solid transparent;
  border-bottom: 60.62% solid var(--triangle-color);
}

This grid will automatically adjust the number of columns based on screen size, and each triangle scales with its grid cell.

3. Dynamic Table Cells with Custom Colors #

For your table where each <td> needs a triangle with a dynamic background color, use CSS custom properties (variables) to pass the color directly into each triangle. Combine this with responsive table styling to ensure cells scale properly:

HTML #

<table class="triangle-table">
  <tr>
    <td style="--triangle-color: #ff6b6b;"><div class="td-triangle"></div></td>
    <td style="--triangle-color: #4ecdc4;"><div class="td-triangle"></div></td>
    <td style="--triangle-color: #45b7d1;"><div class="td-triangle"></div></td>
  </tr>
  <tr>
    <td style="--triangle-color: #f9ca24;"><div class="td-triangle"></div></td>
    <td style="--triangle-color: #6c5ce7;"><div class="td-triangle"></div></td>
    <td style="--triangle-color: #fd79a8;"><div class="td-triangle"></div></td>
  </tr>
</table>

CSS #

.triangle-table {
  width: 100%;
  border-collapse: collapse;
}

.triangle-table td {
  width: 33.33%; /* Equal-width columns */
  padding: 1rem;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.td-triangle {
  width: 0;
  height: 0;
  /* Scale relative to the <td> width */
  border-left: 30% solid transparent;
  border-right: 30% solid transparent;
  border-bottom: 51.96% solid var(--triangle-color);
  /* 51.96% = 60% base width * 0.866 (√3/2) for perfect equilateral proportions */
  margin: 0 auto;
}

/* Responsive tweak for small screens */
@media (max-width: 600px) {
  .triangle-table td {
    padding: 0.5rem;
  }
  
  .td-triangle {
    border-left: 25% solid transparent;
    border-right: 25% solid transparent;
    border-bottom: 43.3% solid var(--triangle-color);
  }
}

Here, we set --triangle-color directly on each <td> (you can inject this dynamically via JS or server-side code), and the triangle uses that variable for its color. The table and triangles scale with the viewport, thanks to percentage widths and media queries for fine-tuning.

Bonus Tips #

• Different Triangle Directions: Swap which border is colored (e.g., border-top for an upward-pointing triangle, border-left for a right-pointing one).
• Overlapping Triangles: Use position: absolute and transform inside a relative container to layer triangles in a single div.
• Smoother Scaling: Add transition: all 0.3s ease to triangles if you want them to animate when resizing.

内容的提问来源于stack exchange，提问作者Arpit Vaishnav