아바타 이미지에 대한 오각형 모양을 만드는 방법은 무엇입니까?

Question

사용자 아바타 이미지 (또는 .svg)의 오각형 모양을 만드는 방법을 알 수 없습니다.

상단을 가리 키지 않는 모양을 찾습니다.

나는 여기에 예제를 발견했다 http://css-tricks.com/examples/ShapesOfCSS/ 그러나 어떻게 같은 모양으로 이미지를 작성 해야할지 모르겠다. 백그라운드 속성도 작동하지 않습니다. 여기에 붙어 있습니다. 어떤 CSS없이

Pentagon example

Answer 1

가장 쉬운 해결책은 svg (최대 브라우저 지원)를 사용하는 것입니다.

---

당신은 인라인 svgclipPath를 정의하고 image에 svg 클리핑을 적용 할 수 있습니다

<svg width="100" height="100" viewBox="-1 0 101 100"> 
 
    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="black" fill="coral" /> 
 
</svg>

. 이것은 CSS clip-path보다 나은 브라우저 지원을 제공합니다.

<svg width="100" height="100" viewBox="0 0 100 100"> 
 
    <defs> 
 
    <clipPath id="shape"> 
 
     <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" /> 
 
    </clipPath> 
 
    </defs> 
 
    <image clip-path="url(#shape)" xlink:href="https://www.lorempixel.com/100/100" x="0" y="0" height="100px" width="100px" /> 
 
</svg>

Answer 2

당신은 클립 경로

CSS-Tricks Link

div { 
 
    width: 280px; 
 
    height: 280px; 
 
    background-image: url(http://placekitten.com/g/200/300); 
 
    background-size: 100%; 
 
    -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 
 
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 
 
} 
 
/* Center the demo */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div></div>

Answer 3

를 사용할 수 있습니다 당신은 뭔가 리튬을 찾고 계십니까 이런?

#pentagon { 
 
    position: relative; 
 
    width: 54px; 
 
    border-width: 0 18px 50px; 
 
    border-style: solid; 
 
    border-color: red transparent; 
 
} 
 
#pentagon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    top: 50px; 
 
    left: -18px; 
 
border-style: solid; 
 
border-width: 45px 45px 0 45px; 
 
border-color: red transparent transparent transparent; 
 
} 
 

 
.logo-sponsor{ 
 
    z-index: 1000; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 10px; 
 
    width: 36px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    display: block; 
 
}

<div id="pentagon"> 
 
    <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/43-twitter-48.png" class="logo-sponsor"> 
 
</div>