Как я могу визуализировать четыре треугольника в двух углах элемента SVG?

Question

Я занимаюсь редизайном своего сайта, и мне нужно упомянуть об этом ниже. У меня нет опыта работы с путями и SVG. Кто-нибудь, помогите мне с этим.

Мне нужно два треугольных пути в верхнем левом углу моего раздела и два пути в нижнем правом углу этого же раздела.

Поскольку я новичок в проектировании, мне нужно это исправить.

.svgCorner {
  fill:  #ff0000;
  width: 7%;
}

.svgCornerBL{
    fill: #ff9933;
  position: absolute;
  bottom: 0;
  left: 0;
}

.svgCornerBR {
  position: absolute;
  bottom: 0;
  right: 0;
  -ms-transform: rotate(270deg); /* IE 9 */
  -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
  transform: rotate(270deg);
}

.svgCornerTL{
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.svgCornerTR{
  position: absolute;
  top: 0;
  left: 0;
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

<svg class='svgCorner svgCornerTL' id='svg4' viewBox='0 0 150 150'>               
    <path id='path1' d='M0 150L150 150L0 0'/>
  </svg>

  <svg class='svgCorner svgCornerTR' id='svg4' viewBox='0 0 150 150'>               
    <path id='path1' d='M0 150L150 150L0 0'/>
  </svg>

  <svg class='svgCorner svgCornerBL' id='svg4' viewBox='0 0 150 150'>               
    <path id='path1' d='M0 150L150 150L0 0'/>
  </svg>

  <svg class='svgCorner svgCornerBR' id='svg4' viewBox='0 0 150 150'>               
    <path id='path1' d='M0 150L150 150L0 0'/>
  </svg>
			

Answer 1

Вопрос решен.

Шаг 1: Создал фигуры с помощью иллюстратора и экспортировал их как файлы .SVG.

Шаг 2: Разместил код SVG изображений после И поместил нижний код SVG изображений перед

Шаг 3: Расположите его, используя простой CSS, указанный ниже.

#top
{
position: absolute;
left: 0;
top: 0;
}
   
#bottom
{
position: absolute;
right: 0;
bottom: 0;
}
   

<!-- Top left Corner -->
<img src="../svg/top.svg" id="top">
<img src="../svg/bottom.svg" id="top">

<!-- Bottom Right Corner -->
<img src="../svg/top1.svg" id="bottom">
<img src="../svg/bottom1.svg" id="bottom">