当前位置：首页 > JavaScript

js实现菱形

2026-03-01 09:21:13JavaScript

使用 CSS 和 JavaScript 绘制菱形

在网页中绘制菱形可以通过 CSS 和 JavaScript 结合实现。以下是几种常见的方法：

使用 CSS transform 旋转正方形

通过创建一个正方形元素，然后旋转 45 度可以得到菱形效果：

<div class="diamond"></div>

<style>
.diamond {
  width: 100px;
  height: 100px;
  background: #3498db;
  transform: rotate(45deg);
}
</style>

使用 CSS clip-path 创建菱形

clip-path 属性可以直接裁剪出菱形形状：

<div class="diamond"></div>

<style>
.diamond {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>

使用 JavaScript 动态生成菱形

通过 JavaScript 动态创建并设置样式：

<div id="diamond-container"></div>

<script>
const diamond = document.createElement('div');
diamond.style.width = '100px';
diamond.style.height = '100px';
diamond.style.backgroundColor = '#2ecc71';
diamond.style.transform = 'rotate(45deg)';

document.getElementById('diamond-container').appendChild(diamond);
</script>

使用 Canvas 绘制菱形

使用 HTML5 Canvas API 可以更灵活地绘制菱形：

<canvas id="diamondCanvas" width="200" height="200"></canvas>

<script>
const canvas = document.getElementById('diamondCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#9b59b6';
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(200, 100);
ctx.lineTo(100, 200);
ctx.lineTo(0, 100);
ctx.closePath();
ctx.fill();
</script>

响应式菱形实现

结合 CSS 变量和 JavaScript 可以实现响应式菱形：

js实现菱形

<div class="responsive-diamond"></div>

<style>
.responsive-diamond {
  --size: 100px;
  width: var(--size);
  height: var(--size);
  background: #f39c12;
  transform: rotate(45deg);
}
</style>

<script>
function updateDiamondSize() {
  const diamond = document.querySelector('.responsive-diamond');
  const newSize = window.innerWidth * 0.1;
  diamond.style.setProperty('--size', `${newSize}px`);
}

window.addEventListener('resize', updateDiamondSize);
updateDiamondSize();
</script>

这些方法提供了不同复杂度和灵活性的菱形实现方式，可以根据具体需求选择适合的方案。CSS 方法适合简单静态图形，Canvas 适合需要更多控制和动画效果的场景，而响应式实现则能适应不同屏幕尺寸。