Html 使用css将SVG放置在父div的每个角落？

我有一个div，其中包含一些内容，有时它可能包含很多其他天几乎没有。它每天拥有的一件事是4个svg的角落，与svg应该始终位于角落中的内容无关

我的问题是我不能让他们呆在正确的位置，当我给他们位置绝对属性时，他们跳出div

这是一张解释请求的图片

html

<div style='background-color:#fffff0; text-align-last: center;'>
  <h1>Photos</h1>
  <p>preview</p>

  <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>

</div>

---

在父级

div

上使用

position:relative

，使用

absolute

定位，并使用适当的

顶部

，

右侧

，

底部

和

左侧

值，如：

对于父div：

<div style='background-color:#fffff0; text-align-last: center; position: relative;'>
  ...
</div>

请看下面的代码片段：

.svgCorner{
填充：#ff0000；
宽度：7%；
}
.svgCornerBL{
位置：绝对位置；
底部：0；
左：0；
}
.SVGCornebr{
位置：绝对位置；
底部：0；
右：0；
-ms变换：旋转（270度）；/*IE 9*/
-webkit变换：旋转（270度）；/*铬合金、Safari、Opera*/
变换：旋转（270度）；
}
svgCornerTL先生{
位置：绝对位置；
排名：0；
右：0；
-ms变换：旋转（180度）；/*IE 9*/
-webkit变换：旋转（180度）；/*铬合金、Safari、Opera*/
变换：旋转（180度）；
}
.svgCornerTR{
位置：绝对位置；
排名：0；
左：0；
-ms变换：旋转（90度）；/*IE 9*/
-webkit变换：旋转（90度）；/*铬合金、Safari、Opera*/
变换：旋转（90度）；
}

照片
预演

我有您需要的：

.svgCorner{
填充：#ff0000；
宽度：100%；
}
.svgCornerBL{}
.SVGCornebr{
-ms变换：旋转（270度）；
/*IE 9*/
-webkit变换：旋转（270度）；
/*铬、狩猎、歌剧*/
变换：旋转（270度）；
}
svgCornerTL先生{
-ms变换：旋转（180度）；
/*IE 9*/
-webkit变换：旋转（180度）；
/*铬、狩猎、歌剧*/
变换：旋转（180度）；
}
.svgCornerTR{
-ms变换：旋转（90度）；
/*IE 9*/
-webkit变换：旋转（90度）；
/*铬、狩猎、歌剧*/
变换：旋转（90度）；
}
.svg容器TL{
宽度：7%；
位置：绝对位置；
左：0；
排名：0；
}
.svg容器TR{
宽度：7%；
位置：绝对位置；
右：0；
排名：0；
}
.svg容器BL{
宽度：7%；
位置：绝对位置；
左：0；
底部：0；
}
.svg容器BR{
宽度：7%；
位置：绝对位置；
右：0；
底部：0；
}

照片
预演

是，正是我所需要的。我知道上、下、右、左=0，但我的svg失控了。。。。直到“职位：亲戚”，非常感谢！是的@RasmusPuls。这是我的荣幸。谢谢！正如我对另一个答案的评论。“微小”的位置：父div上的相对位置使世界变得不同。确切地说，这是设计时一个很好的解决方案

<div style='background-color:#fffff0; text-align-last: center; position: relative;'>
  ...
</div>

.svgCornerBL{
  position: absolute;
  bottom: 0;
  left: 0;
}

.svgCornerBR {
  position: absolute;
  bottom: 0;
  right: 0;
}

.svgCornerTL{
  position: absolute;
  top: 0;
  right: 0;
}

.svgCornerTR{
  position: absolute;
  top: 0;
  left: 0;
}