Как создать двухцветный контент с разделителем sla sh?

Question

Мой код, подобный этому:

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

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

        </div>
    </v-col>

Мой код, подобный этому: https://codepen.io/positivethinking639/pen/MWwGygw

Может ли это быть пользовательским CSS или передавать изображение ?

Я пытаюсь использовать css, но существует 2 элемента. Есть прямоугольный элемент и треугольный верхний правый элемент

Я хочу сделать из него только 1 элемент. Потому что я хочу показывать слайды внутри этого контента. Поэтому я хочу объединить это в 1 элемент

Как я могу это сделать?

Answer 1

Вы можете рассмотреть возможность использования нескольких фонов на одном элементе, значения должны быть скорректированы в соответствии с тем, что вы хотите

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>

Answer 2

Когда я интерпретирую ваш вопрос, вы хотите создать прямоугольник с диагональной линией через него.

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

<div class="container" />