如何使用斜线分隔符创建两种颜色的内容？

Question

我的代码是这样的：

    <v-col
      sm="3"
      class="contain-left"
    >
        <div id="rectangle">

        </div>
        <div id="triangle-topright">

        </div>
    </v-col>

我的codepen像这样：https://codepen.io/positivethinking639/pen/MWwGygw

可以通过CSS定制还是必须传递图像？

我尝试使用CSS，但是存在2个元素。有矩形元素和三角形右上角元素

我只想将其设为1个元素。因为我想在该内容中显示幻灯片。所以我想将其合并为1个元素

我该怎么办？

Answer 1

我在解释您的问题时，您要创建一个带有对角线的盒子。

.container {
  background: linear-gradient(to left bottom, #d3e3ff 50%, #eff6ff 50%);
  width: 100px;
  height: 100px;
}

<div class="container" />

Answer 2

您可以考虑在一个元素上使用多个背景，值将根据需要进行调整

div {
  background: 
  linear-gradient(25deg, #00000000 49%, #d3e3ff 50%) 0 0/100% 50% no-repeat, 
  linear-gradient(#eff6ff, #eff6ff) 0 0/50% 100% no-repeat;
  width: 100px;
  height: 150px;
}

<div></div>