使用 css 将 SVG 放置在父级 div 的每个角落?
Place SVG in each corner of parent div with css?
我有一个 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);
}
在您的 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>
希望对您有所帮助!
我有你需要的:
.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>
我有一个 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);
}
在您的 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>
希望对您有所帮助!
我有你需要的:
.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>