Как сделать круглый блок лого используя bootstrap?

Question

Как сделать такой блок используя bootstrap?

вот что я сделал:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Document</title>
  <style>
      #containeer{
          width: 600px;
      }
  </style>
</head>
<body>
  <div id="containeer" class="d-flex flex-column bg-secondary text-white align-items-center justify-content-center">
    <img src="https://cdn-icons.flaticon.com/png/512/3177/premium/3177440.png?token=exp=1636972015~hmac=9ac5a42e2eb885104540cab2814c8530" alt="image" style="width:100px;">
    <h1>Vadim</h1>
    <p>on AD'S BOARD since December 2018</p>
    <div id="button" class="mb-1 d-flex p-2 border border-info justify-content-center align-items-center">
        <p class="text-info">Seller's other ads</p>
    </div>
  </div>
</body>
</html>

Answer 1

Как я понял основные затруднения сверстать круглый блок лого с загнутой линией.

Обдумайте вариант использования SVG.
Лого рисуется в векторном редакторе, это намного проще, чем верстать кривые линии с загогулиной в CSS.

SVG как раз создан для векторной графики. У вас получится фигура, которая будет выглядеть одинаково во всех браузерах и вёрстка не сломается на любом гаджете и при любом разрешении экрана.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="430" height="300" viewBox="0 0 430 300" >
  <!-- фон -->
  <g> 
   <rect x="0" y="60" width="430" height="240" fill="#E5E6E8"/>
      <!-- Белый фон внутри лого -->
   <circle  cx="215.3" cy="69.3" r="53.5"  fill="#fff"/>
  </g>
                <!-- Жёлтый сектор -->
  <path  d="M175.7 106.3c6.6-7 14.1-11.7 22.5-14.8a51 51 0 0 1 38.7 1.8c6.2 3.7 19.4 11.8 14.6 16.1a42.2 42.2 0 0 1-13.5 8.4 64 64 0 0 1-18.7 4.7c-5.4.5-11 .3-16.4-1a61.8 61.8 0 0 1-19.3-8c-3-2-5.4-3-7.9-7.2z" id="path825" fill="#F1CD25"/>
               <!-- Обводка лого -->
 <path id="logo_zig" d="M167.2 94.7s-10.1-21.9-3.6-41a57.3 57.3 0 0 1 34-34.3 49.5 49.5 0 0 1 38.2 1.9 60.7 60.7 0 0 1 31.5 36.9 57 57 0 0 1-8.6 42.9 48 48 0 0 1-24.8 18 62 62 0 0 1-34.6 1.3c-8.8-2.2-17-7.2-23.6-13.6-2.7-2.7 18-14.1 28.6-16.9a53.8 53.8 0 0 1 26.1 1 72.8 72.8 0 0 1 14.6 7.3"  fill="none" stroke="#4C535C" stroke-width="5" stroke-linecap="round" stroke-linejoin="miter" />
               <!-- Серый круг (голова) -->
  <circle id="path823" cx="215.3" cy="57.5" r="20"  fill="#D7DCE1"/>
</svg>

При желании можно сделать анимацию лого.

Answer 2

Анимация лого

Основана на трех последовательных анимациях:

1. Анимация рисования контура

С помощью изменения stroke-dasharray. Максимальная длина линии - 397px

При stroke-dashoffset="0,397" Линия полностью скрыта
При stroke-dashoffset="397,0" Линия полностью нарисована

2. Анимация появления головы аватара с помощью изменения opacity
3. Анимация заполнения жёлтого сектора с помощью изменения opacity

Анимация начнётся после клика по svg

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="430" height="300" viewBox="0 0 430 300" >
  <!-- фон -->
  <g> 
   <rect x="0" y="60" width="430" height="240" fill="#E5E6E8"/>
      <!-- Белый фон внутри лого -->
   <circle  cx="215.3" cy="69.3" r="53.5"  fill="#fff"/>
  </g>
                <!-- Жёлтый сектор -->
  <path id="Yellow" opacity="0" d="M175.7 106.3c6.6-7 14.1-11.7 22.5-14.8a51 51 0 0 1 38.7 1.8c6.2 3.7 19.4 11.8 14.6 16.1a42.2 42.2 0 0 1-13.5 8.4 64 64 0 0 1-18.7 4.7c-5.4.5-11 .3-16.4-1a61.8 61.8 0 0 1-19.3-8c-3-2-5.4-3-7.9-7.2z"  fill="#F1CD25">
       <animate id="an_Yellow"
         attributeName="opacity"
         begin="an_head.end+0.2s"
         dur="0.5s" 
         from="0" to="1"
         fill="freeze"
         restart="whenNotActive" />
  </path>
               <!-- Обводка лого -->
 <path id="logo_zig" stroke-dasharray="0,397" d="M167.2 94.7s-10.1-21.9-3.6-41a57.3 57.3 0 0 1 34-34.3 49.5 49.5 0 0 1 38.2 1.9 60.7 60.7 0 0 1 31.5 36.9 57 57 0 0 1-8.6 42.9 48 48 0 0 1-24.8 18 62 62 0 0 1-34.6 1.3c-8.8-2.2-17-7.2-23.6-13.6-2.7-2.7 18-14.1 28.6-16.9a53.8 53.8 0 0 1 26.1 1 72.8 72.8 0 0 1 14.6 7.3"  fill="none" stroke="#4C535C" stroke-width="4" stroke-linejoin="miter" >
     
     <animate id="an_dash"
         attributeName="stroke-dasharray"
         begin="svg1.click" dur="1.5s" 
         from="0,397" to="397,0"
         fill="freeze"
         restart="never" />
  </path>
               <!-- Серый круг (голова) -->
  <circle id="head" opacity="0" cx="215.3" cy="57.5" r="20"  fill="#D7DCE1">
     <animate id="an_head"
         attributeName="opacity"
         begin="an_dash.end+0.2s"
         dur="0.5s" 
         from="0" to="1"
         fill="freeze"
         restart="whenNotActive" />
  </circle>
</svg>

БЛОГ НА HUSL

Как сделать круглый блок лого используя bootstrap?

Ответы (2 шт):

Анимация лого