Html 带图像的对角div

我正试图达到与之类似的结果

最好是黑色和蓝色部分是分开的div，因为我试图实现的是非常困难/不可能的。HTML代码看起来像

<div class="diagonal">
    <div class="diagonal-black"></div>
    <div class="diagonal-blue"></div>
</div>

---

我认为最常用的方法是使用剪辑路径。另一种方法是使用边界。这两方面都有教程。下面是一个如何使您的示例生效的示例

---

这是一个用来轻松生成您喜欢的形状和角度的站点

我认为最常用的方法是使用剪辑路径。另一种方法是使用边界。这两方面都有教程。下面是一个如何使您的示例生效的示例

---

这里有一个站点，可以使用伪元素上的边框轻松生成您喜欢的形状和角度：

对角线{宽度：700px；高度：200px；}
.对角黑色{浮动：左侧；背景：黑色；宽度：50%；高度：200px；}
.对角蓝色{浮动：右侧；背景：蓝色；宽度：50%；高度：200px；位置：相对；}
.对角蓝色：在{位置：绝对；内容：''；宽度：0；顶部：0；左侧：-50px；高度：0；边框底部：200px实心透明；边框右侧：50px实心蓝色；}

---

在伪元素上使用边框：

对角线{宽度：700px；高度：200px；}
.对角黑色{浮动：左侧；背景：黑色；宽度：50%；高度：200px；}
.对角蓝色{浮动：右侧；背景：蓝色；宽度：50%；高度：200px；位置：相对；}
.对角蓝色：在{位置：绝对；内容：''；宽度：0；顶部：0；左侧：-50px；高度：0；边框底部：200px实心透明；边框右侧：50px实心蓝色；}

---

像这样的东西怎么样

<div class='diagonal'></div>

<style>
.diagonal {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: black;
  overflow: hidden;
}

.diagonal::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100%;
  height: 200%;
  background-color: blue;
  -webkit-transform: skewX(45deg) translateX(-50%);
  -moz-transform: skewX(45deg) translateX(-50%);
  -ms-transform: skewX(45deg) translateX(-50%);
  -o-transform: skewX(45deg) translateX(-50%);
  transform: skewX(45deg) translateX(-50%);
}
</style>

.对角线{
位置：相对位置；
宽度：100%；
高度：300px；
背景色：黑色；
溢出：隐藏；
}
.对角线：：之后{
内容：''；
位置：绝对位置；
左：50%；
宽度：100%；
身高：200%；
背景颜色：蓝色；
-webkit变换：斜交（45度）translateX（-50%）；
-moz变换：skewX（45度）translateX（-50%）；
-ms变换：斜交（45度）translateX（-50%）；
-o-变换：斜交（45度）translateX（-50%）；
变换：斜交（45度）translateX（-50%）；
}

基本上，通过这种方式，您所要做的就是调整

变换

、

宽度

、和/或

高度

，使其处于所需的准确位置

---

像这样的东西怎么样

<div class='diagonal'></div>

<style>
.diagonal {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: black;
  overflow: hidden;
}

.diagonal::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100%;
  height: 200%;
  background-color: blue;
  -webkit-transform: skewX(45deg) translateX(-50%);
  -moz-transform: skewX(45deg) translateX(-50%);
  -ms-transform: skewX(45deg) translateX(-50%);
  -o-transform: skewX(45deg) translateX(-50%);
  transform: skewX(45deg) translateX(-50%);
}
</style>

.对角线{
位置：相对位置；
宽度：100%；
高度：300px；
背景色：黑色；
溢出：隐藏；
}
.对角线：：之后{
内容：''；
位置：绝对位置；
左：50%；
宽度：100%；
身高：200%；
背景颜色：蓝色；
-webkit变换：斜交（45度）translateX（-50%）；
-moz变换：skewX（45度）translateX（-50%）；
-ms变换：斜交（45度）translateX（-50%）；
-o-变换：斜交（45度）translateX（-50%）；
变换：斜交（45度）translateX（-50%）；
}

基本上，通过这种方式，您所要做的就是调整

变换

、

宽度

、和/或

高度

，使其处于所需的准确位置

---

不完全是我想要的，左边的部分应该可以调整大小而不影响右边的部分不完全是我想要的，左边的部分应该可以调整大小而不影响右边的部分谢谢，这几乎就是我需要的。假设我想用一个图像替换黑色，我会怎么做？那么你希望它看起来像什么？蓝色的对角线位会放在图像的顶部吗？是的，那将是完美的。修改代码以包含一个图像来代替黑色的div。谢谢，这几乎是我需要的。假设我想用一个图像替换黑色，我会怎么做？那么你希望它看起来像什么？蓝色的对角位会放在图像的顶部吗？是的，那将是完美的。修改代码以包含一个图像来代替黑色的div。问题是我需要能够修改2个div的内容，这在本例中是无法做到的。不过谢谢。问题是我需要能够修改2个div的内容，这在本例中是无法做到的。谢谢你。