Как создать форму пентагона для изображения аватара?

Я не могу понять, как создать форму пятиугольника для изображения аватара пользователя (или .svg).Как создать форму пентагона для изображения аватара?

Ищет форму, которая не указана сверху.

Я нашел здесь примеры http://css-tricks.com/examples/ShapesOfCSS/, но не знаю, как заполнить изображение в такой форме. Фон собственности тоже не будет работать, застрял здесь.

Pentagon example

источник

2014-12-09 user2791999

Вы могли бы применить CSS преобразования ('преобразования: поворот (180 градусов);') и вращать шестигранник с CSS трюков. – j08691

Ответы SVG, возможно, являются способом выхода. Если вам нужна более старая поддержка браузера, возможно, единственным способом будет маска png, помещенная поверх обычного изображения. Png будет соответствовать любому фону, который вы используете, и иметь отверстие в форме пятиугольника посередине, в котором вы увидите аватар. – kthornbloom

простое решение без каких-либо CSS, будет использовать 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>

Вы можете определить встроенный svgclipPath и применять svg вырезку на image. Это улучшает поддержку браузера, чем 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>

источник

2014-12-09 14:26:41

спасибо, я не знал о svg. Но как вставить туда изображение в форматах .png или .jpg? – user2791999

@ user2791999 - Проверьте изменения. Сожалею! Не понял ваш вопрос. –

Вы можете использовать клип-путь

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>

источник

2014-12-09 14:30:22

Не работает в Firefox. –

Просто предлагая выбор. Я тоже предпочитаю SVG. –

Я не спорю с тобой. SVG лучше ИМО тоже ... просто заявляя о выборе. –

Вы ищете что-то Ли ke это?

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

источник

2014-12-09 16:36:32

Как создать форму пентагона для изображения аватара?

ответ

Смежные вопросы