如何在html中插入对角图片？

你可以使用HTML和CSS来插入对角图片。以下是一个简单的示例：

首先，你需要创建一个具有对角线的容器。你可以使用CSS中的transform属性和rotate函数来实现这一点。例如：

.diagonal-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.diagonal-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}

这将创建一个具有蓝色背景和从右下角到左上角的对角线的容器。

接下来，你需要将图像插入到容器中。你可以将图像设置为容器的背景，或者将其插入到容器中。例如：

.diagonal-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: url('your-image-url') no-repeat center center/cover;
}

.diagonal-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}

这将在容器中插入一个图像，并将其旋转为对角线。请注意，你需要为图像设置绝对定位，以便它覆盖整个容器。

完整的HTML代码如下：

<div class="diagonal-container">
  <img src="your-image-url" alt="your-image" />
</div>

<style>
.diagonal-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: url('your-image-url') no-repeat center center/cover;
}

.diagonal-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}

.diagonal-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}
</style>

记得将 `your-image-url` 替换为你自己的图像URL。