Как реализовать данное наложение?

Question

[rrddxx]

Не получается реализовать такое наложение


Вот код:

<div class="main_stage">
	<div class="h">Анализируем</div>
	<div class="h">Прототипируем</div>
	<div class="h">Дизайним</div>
	<div class="h">Программируем</div>
	<div class="h">Тестируем</div>
	<div class="h">Релизим</div>
	<div class="h">Продвигаем</div>
	</div>
	<style type="text/css">
		.main_stage{
				width: 100%;
				float: left;
		}

	.h{
			width: 100px;
			opacity: 1;
			background: #FFFFFF;
			margin-right: -50px;
			border: 1px solid black;
			border-top-left-radius: 40px;
			border-bottom-left-radius: 40px;
			padding: 15px;
			display: inline-block;
		}
		
		.h:hover{
			background: #F2A456;
			position: relative;
			margin-right: -50px;

		}

	</style>

Answer 1

[Сергей delphinpro]

Отрицательный margin-left

Собственно и ваш вариант работает.

Comments

[rrddxx]

Нужно именно наложение границы соседнего блока с правой стороны

[Сергей delphinpro]

rrddxx, а что у меня в примере? Что не так-то?

[ProjectSoft]

Может имеется ввиду вот такой вариант?

[Сергей delphinpro]

ProjectSoft, тоже прикольно