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

Question

我有一个div包含一些内容，有些日子它可能包含很多其他几天几乎没有。它每天都有一个东西是4 svg的角落，独立于svg应该始终在角落里的内容。

我的问题是，我不能让他们留在正确的地方，当我给他们的位置绝对属性，他们跳出div“。

Here is an example easy to play around with

这是一张解释请求的图片

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>

css（不完整/错误）

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

.svgCornerBL{

}

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

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

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

Answer 1

在你的父亲position: relative上使用div并使用absolute定位与适当的top，right，bottom和left值，如：

对于父div：

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

对于SVG：

.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;
}

看看下面的代码：

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

.svgCornerBL{
  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);
}

<div style='background-color:#fffff0; text-align-last: center; position: relative;'>
  <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>

希望这可以帮助！

Answer 2

我有你需要的东西：

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

.svgCornerBL {}

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

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

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

.svg-container-TL {
  width: 7%;
  position: absolute;
  left: 0;
  top: 0;
}

.svg-container-TR {
  width: 7%;
  position: absolute;
  right: 0;
  top: 0;
}

.svg-container-BL {
  width: 7%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.svg-container-BR {
  width: 7%;
  position: absolute;
  right: 0;
  bottom: 0;
}

<div style='background-color:#fffff0; text-align-last: center; position: relative; min-height:200px;'>
  <h1>Photos</h1>
  <p>preview</p>
  <div class="svg-container-TL">
    <svg class='svgCorner svgCornerTR' id='svg4' viewBox='0 0 150 150'>
      <path id='path1' d='M0 150L150 150L0 0' />
    </svg>
  </div>

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

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

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