html怎么让图片倾斜

使用css实现旋转 rotate

transform:rotate(90deg)

3D旋转可以实现倾斜

transform:rotate3d()

可以先去了解 CSS transform 属性

思路给你：

弄两个方块，绝对定位，一左一右，左边倾斜45度，右边倾斜45度

背景颜色对上

然后z-index：-1

就可以让

“”链接详情还有右边的图片在上层“”

最外面的div加上overflow：hidden还有相对定位

html:

<canvas id="c" width="400px" height="400px">not support</canvas>

CSS:

#c{

  background-color:rgba(134, 179, 225, 1)

}

JS:

window.onload = init

var ctx = null

var recX = 150,

    recY = 150,

    angle = -35

function init() {

  var cvs = document.getElementById('c')

  ctx = cvs.getContext('2d')

  

  drawRectangle()

  drawCircle(-100, 0, 50, '#fff')

  drawCircle(100, 0, 50, 'rgba(134, 179, 225, 1)')

}

function setPos() {

  ctx.translate(recX, recY)  

  ctx.rotate(angle * Math.PI / 180)

}

function drawRectangle() {

  ctx.save()

  setPos()

  ctx.fillStyle = '#fff'

  ctx.fillRect(-100, -50, 200, 100)

  ctx.restore()

}

function drawCircle(x, y, r, fillStyle) {

  ctx.save()

  ctx.beginPath()

  setPos()

  ctx.fillStyle = fillStyle

  ctx.arc(x, y, r, 0, Math.PI * 2, true)

  ctx.closePath()

  ctx.fill()

  ctx.restore()

}

---