상위 div의 각 구석에 SVG를 CSS로 배치 하시겠습니까?

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 (불완전/실수) 요청

설명되고 div 적절한 top, right와 absolute 위치를 사용하여 부모에

.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 같은 bottom & left 값 : 부모의 div

:

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

SVGs 경우 :

.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

Hello I have what you need, 

Best Regards.. 

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

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