Стиль & обводка аватарок

[Maqlao]

Всех приветсвую.

Подскажите пожалуйста, как реализовать стиль и обводку аватарки. (Показано на изображении)

Спойлер

 

[SlawkA]

привет. вроде есть код сделать в полигоне.

ну а об водку можно и самому добавить

Спойлер

Спойлер

clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

 

 

[aLEX49566]

2 минуты назад, SlawkA сказал:

об водку

😂

[Maqlao]

SlawkA С обводкой разобрался,

а вот как сделать сам стиль фотографии ромбиком, пока не догнал.

[Maqlao]

SlawkA Почти близко)

Поигрался с border-radius.

Спойлер

[AHristich]

7 минут назад, Anche сказал:

Почти близко)

Поигрался с border-radius.

  Показать контент

Чтобы не измываться над своим разумом посмотри html5book.ru/css-figury/?ysclid=l6kzettb5i693491497

И сделаешь на любой выбор

Anche Не кривись. Там примеры какие захочешь и все с помощью css.

 

Изменено 8 августа, 2022 пользователем AHristich

[Maqlao]

AHristich Просто до этого ссылки не было, поэтому я и не понял к чему твоя отсылка.)

[Maqlao]

AHristich Странно, но с этим не получается, допустим ромбик я попытался сделать, 

вставляется просто фигура, самой авватарки нет.

[AHristich]

5 минут назад, Anche сказал:

AHristich Странно, но с этим не получается, допустим ромбик я попытался сделать, 

вставляется просто фигура, самой авватарки нет.

Ну мы же не знаем как вы делаете 🤷‍♂️

[Maqlao]

AHristich Стандартный код.

}
.ipsUserPhoto img {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: cover;
}

Как из этого сделать, чтобы аватар выглядил ромбиком?)

[aLEX49566]

1 час назад, SlawkA сказал:

clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

Так не?)

[AHristich]

Anche 

.ipsUserPhoto {
  background:none;
  position: relative;
  z-index: 1800;
  overflow: hidden;
  border-radius:0;
  transform: rotate(45deg);
}
.ipsUserPhoto img {
  max-width: 100% ;
  transform: rotate(-45deg);
}

Не тестировано!!!

[Maqlao]

AHristich Странно, но я у себя не могу найти .ipsUserPhoto.

Шаблон default.

Я тестил через код элемента.

Изменено 8 августа, 2022 пользователем Anche

[AHristich]

6 минут назад, Anche сказал:

AHristich Странно, но я у себя не могу найти .ipsUserPhoto.

Шаблон default.

Я тестил через код элемента.

В custom.css добавь этот код.

В Томске час ночи еслиф што

[Maqlao]

Anche Протестил,

аватар перекрывает звание и бэйдж.

А в карточке пользователя, вообще бардак.

Ахаха)

AHristich 

Спойлер

Спойлер

 

[aLEX49566]

сделал за минуту

Спойлер

 

Спойлер

 

[Maqlao]

5 минут назад, aLEX49566 сказал:

сделал за минуту

  Показать контент

 

  Показать контент

 

Рад за тебя.

[aLEX49566]

32 минуты назад, AHristich сказал:

.ipsUserPhoto {

Сюда надо вставить это:

49 минут назад, aLEX49566 сказал:

Так не?)

 

И потом уже радоваться ))

Вернее сюда : 

 

.ipsUserPhoto {

это:

clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

[Maqlao]

aLEX49566 В карточке профиля отображается как-то не корректно.

А так да, то что нужно было мне.)

[aLEX49566]

Ну это уже править тебе под свой форум

[Maqlao]

4 минуты назад, aLEX49566 сказал:

Ну это уже править тебе под свой форум

Как подогнать под контуры аватара?)

Изменено 8 августа, 2022 пользователем Anche

[Dimarik111]

2 часа назад, Anche сказал:

Как подогнать под контуры аватара?)

Anche Ставь код внизу ничего не удаляя

Anche В общем должно выглядет так

Anche 

Спойлер

.ipsUserPhoto {
    background: transparent;
  clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);

 

Anche 

Anche 

[SlawkA]

Dimarik111 у тебя в коде закрывающего нет }

[Dimarik111]

SlawkA 

.ipsUserPhoto {
    background: transparent;
  clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
}

 

[Maqlao]

Остановился все таки на своем.)

Всем спасибо за помощь.🙂