Как нарисовать рамку треугольникам если он построен в conic-gradient?

Для того чтобы нарисовать рамку в форме треугольника с использованием conic-gradient, вам понадобится создать рамку из двух треугольников.

Вот пример кода, который демонстрирует, как это можно сделать:

HTML:

<div class="triangle"></div>

CSS:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}

.triangle:before {
  content: "";
  position: absolute;
  top: -100px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(180deg);
}

В этом коде мы создаем два треугольника с помощью CSS. Один из треугольников является основным треугольником, который отображается на странице, а второй треугольник, созданный с использованием псевдоэлемента :before, служит для создания рамки. Чтобы сделать рамку, мы задаем рамке основного треугольника такие же размеры и цвет, как и у самого треугольника, а затем поворачиваем его на 180 градусов с помощью transform: rotate(180deg), чтобы он соответствовал форме основного треугольника и создавал рамку вокруг него.

Другой способ создания рамки в форме треугольника с использованием conic-gradient - это использование фигур CSS и перекрытия их с помощью position: absolute и z-index. Вот пример кода:

HTML:

<div class="triangle">
  <div class="border"></div>
</div>

CSS:

.triangle {
  width: 100px;
  height: 100px;
  background: conic-gradient(red, red);
  position: relative;
}

.border {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 2;
}

В этом коде мы используем conic-gradient для задания цвета треугольника. Затем мы добавляем дополнительный элемент с классом .border, который является треугольником с прозрачными гранями (чтобы он был невидимым), но с красной нижней рамкой. Затем мы используем абсолютное позиционирование и z-index, чтобы перекрыть этот элемент над основным треугольником и создать впечатление рамки.

Таким образом, с помощью conic-gradient и некоторых CSS-свойств вы можете нарисовать рамку в форме треугольника. Оба примера кода предлагают разные подходы к решению этой задачи, и вы можете выбрать тот, который наиболее подходит для ваших потребностей.