В итоге, после написания кода, у вас должно получиться что-то вроде этого блока:
блок 1
блок 2
Приступим. Создадим основной блок divnav. В него поместим маленький блок firstDiv и еще один чуть-чуть побольше блок secondDiv
<div class="divnav">
<div id='firstDiv'>первый блок</div>
<div id='secondDiv'>второй блок</div>
</div>
Вообщем-то это всё. Теперь, создадим стиливое оформление для блоков.
.divnav{ /*стиль общего блока*/
max-width:300px;/*ширина блока*/
display: flex;/*показываем, что это общий блок и в нем будут содержаться "влитые" 2 блока*/
}
#firstDiv { /*стиль 1-го блока*/
margin-bottom:5px;
text-align:center; /*текст по-центру*/
border-radius:8px 0 0 8px; /*скругляем края с левого края*/
float : left; /*показывает, что слияние блока идёт с левой стороны*/
}
#secondDiv { /*стиль 2-го блока*/
border-radius:0 8px 8px 0; /*скругляем края у второго блока, только справа*/
font-size:14px; /*размер текста*/
text-align:center; /*текст по-центру*/
margin-bottom:5px;
height:70px; /*задаем высоту блока*/
float : left; /*тоже показываем, что блок "приклеен" слева */
}
Вообщем-то блок готов! Вы можете вставить в него картинку или же сделать из него блок-ссылку или кнопку. Для этого просто вставьте в один из блоков img с картинкой, а для создания ссылки - блок div, общего блока, замените на тег *a href*.
<a class="divnav" href="ссылка">
<div id='firstDiv'>первый блок</div>
<div id='secondDiv'>второй блок</div>
</a>
.jpg)
