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

Question

我有一个 div，其中包含一些内容，有些日子它可能包含很多其他日子几乎 none。它每天都有的一件事是 4 个 svg 的角落，独立于 svg 的内容应该总是在角落里。

我的问题是我无法让它们停留在正确的位置，当我给它们绝对位置属性时它们会跳到 div.

的 "out"

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 (incomplete/mistaken)

.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

在您的 parent div 上使用 position: relative 并使用 absolute 适当定位 top、right、bottom & left 值，例如：

对于parent 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>

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

Place SVG in each corner of parent div with css?

html

css

svg

positioning