Question

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

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

1 个答案: