Как вставить в div уголок из шрифта awesome со здведочкой?

Question

[squirtazzer]

Здравствуйте, надо сюда https://hkar.ru/QrHO вставить уголочек оранжевый со звездочкой, как здесь https://hkar.ru/QrHQ
я так понял это шрифт awesome, он вставляется, но не понимаю как делается полукруг оранжевый.

<div id="layer1"><p style="text-align: center;"><p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"ЭКОНОМ"</p><hr>
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 20pt; color: #00ccff;">5000 РУБ/СУТКИ</span></p>
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">ПРОЖИВАНИЕ</span></p>
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">БАНЯ</span></p>

<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">РЫБАЛКА</span>
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 10pt;"></span>...</p></p>
<hr></div>

вот сам код дивов с планами.

Answer 1

[Михаил Колпаков]

Например, добавить внутри основного блока #layer1 - div star-box, внутри него div star-icon и внутри него поместить саму иконку.
Добавить CSS с позиционированием блока star-box в левом верхнем углу, блоку нужно прописать border-radius правого нижнего угла для скругления, правый нижний угол это 0 0 15px 0:

#layer1 {
  position: relative;
  width: 200px;
  margin: 0 auto;
}

#layer1 .star-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 0 0 15px 0;
  background-color: red;
}

#layer1 .star-box .star-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
}

Пример: https://jsfiddle.net/r8upohhL/1/

Comments

[squirtazzer]

спасибюо все получилось.спасюбо вам большое

[squirtazzer]

https://hkar.ru/QrN4
только на мобилках такой ужас.

[Михаил Колпаков]

squirtazzer: не открывается ссылка

[squirtazzer]

Михаил Колпаков: https://s8.hostingkartinok.com/uploads/images/2017...

[Михаил Колпаков]

squirtazzer: вы не меняете ширину блока для мобильных разрешений, например можно так:

@media (max-width: 767px) {
  .service-item {
    width: 100%;
  }
}

[Михаил Колпаков]

squirtazzer: и лучше убрать все margin. которые там мешаются, оставить только отступ снизу

[squirtazzer]

Михаил Колпаков: попробую.

[Михаил Колпаков]

squirtazzer: будет так:

[squirtazzer]

Михаил Колпаков: отлично.а как сделать чтобы горизонтально блоки шли.** а не так
https://hkar.ru/QrSU

[squirtazzer]

Михаил Колпаков: на мобилке полный порядок.надо чтобы на компе были дивы горизонтально одни за другим.

[Михаил Колпаков]

squirtazzer: так я же написал

@media (max-width: 767px) {
  .service-item {
    width: 100%;
  }
}

вот это нужно добавить под основным кодом блоков, @ media - это обработчик разрешения экрана и в данном коде он говорит, что при разрешении экрана 767px (у мобильных, к примеру) применить ширину в 100%, а основной код при разрешении большем, чем 767px остается тот же, что у вас и был, то есть ширина 32% вроде

[Михаил Колпаков]

squirtazzer: в общем это выглядит так

.service-item {
    width: 32%;
    тут остальной ваш код блоков
}
@media (max-width: 767px) {
  .service-item {
    width: 100%;
    тут код, заменяющий код блоков для мобильных разрешений
  }
}

[squirtazzer]

Михаил Колпаков: да это ок.все ок.я просто не могу понять почему блоки вертикально,а не горизонтально

[squirtazzer]

Михаил Колпаков: это я понял.просто я не понимаю как сделать чтобы блоки шли ГОРИЗОНТАЛЬНО.с мобилкой помогли спасибо огромное.

Answer 2

[Ankhena]

В конце вашего блока добавить

<div class="star-wrap">
    <i class="fa fa-star" aria-hidden="true"></i>
  </div>

добавить стили:

#layer1 {
  position: relative;
}
.star-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

https://jsfiddle.net/7fnx1p2e/

Второй вариант, получше:
вот в этом примере вообще не надо ничего вставлять в html https://jsfiddle.net/jb255aka/
нужно только дописать для блочиков в CSS:

.service-item::before {
  content:"\f005";
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

Comments

[Ankhena]

squirtazzer:
В примере исправлены и теги тоже. Теги <p> не вкладываюся снова в <p> и парные теги хорошо бы закрывать.

И у вашего вопроса тег wordpress не имеет никакого отношения к сути. Логичнее были бы CSS и HTML.