如何在 SVG 元素的两个角上渲染四个三角形？答案

【问题标题】：How can I render four triangles in two corners of an SVG element?如何在 SVG 元素的两个角上渲染四个三角形？
【发布时间】：2019-03-19 18:57:48
【问题描述】：

我正在重新设计我的网站，我需要在下面提及。我没有使用路径和 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>

【问题讨论】：

您应该制作一个快速的图像草图并将其张贴在这里，以便人们知道您所说的角落三角形是什么意思。
您可以在我的帖子中运行代码sn-p。
您能否添加一张图片或至少一个链接到具有所需结果的图片？
您是否拥有 Illustrator 或 Sketch ？
我们可以运行 sn-p 看看它是什么样子的，但我们无法从你所说的内容中看出你想要它是什么样子。你能告诉我们更多关于你想要它的样子吗？

标签： html css svg

【解决方案1】：

问题已解决。

第 1 步：使用 illustrator 创建形状并将其导出为 .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">

【讨论】：