Евгений Петров

Обычное проявление margin collapse.
Для простого предотвращения используется псевдоэлемент:

.frame:before,
.frame:after {
	content: "";
	display: table;
}

Нет никакого порядка в изучении HTML и CSS касательно номеров. Забудьте о номерах, читайте последние версии рекомендаций и спецификаций, тем более вполне возможно, что номера вообще отменят, а единой спецификации CSS уже просто нет.
HTML и CSS изучаются почти параллельно, с небольшим лагом.

К изучению Javascript приступайте после ощущения минимальной уверенности в знаниях в HTML и CSS. ИМХО лучше изучать нативный Javascript, поскольку библиотек много, не говоря уже про фреймворки типа Angular.

Пример
Используем псевдоэлементы и трансформацию.
Простые углы реализуем за счёт рамки. Однако, если потребуется тень, придётся и там применить трансформацию.
Для сложных углов вводим вложенный элемент и используем внутреннюю тень.
И, конечно же, всегда есть вариант с использованием SVG в качестве фона (или напрямую).

Если тень композитная, она и при изменении должна оставаться композитной.

option.presetStorage
Пример с использованием preset в песочнице.
Простейший пример с использованием preset.

Нужно помнить про особенности формирования строчных элементов.

#content,
#asides {
	vertical-align: top;
}

Если у вас есть другие элементы между картинкой и блоком, то нужен General sibling combinator.
el1 ~ el2 {...}

Не пойму проблемы. Вроде всё несложно.

Ради интереса попробовал обойтись без position:absolute. Не получилось... А с ним получилось.

Несомненно, line-height может быть равна 0.

Используя обычные подручные рамки, linear-gradient и и transform:rotate получаем искомое.
Можно поизвращаться с perspective и rotateX, но полученный результат ужасен в FF.

И, по обыкновению, кладём фон с помощью SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="60" height="20" preserveAspectRatio="none" viewBox="0 0 60 20">
	<path fill="#ffb600" d="M 0,20 L 10 0 54 3 60 20 z"/>
</svg>

Убрал лишние атрибуты в SVG, непонятный path (первый из двух).
Для решения добавляем background-size в CSS.
Update: После более глубокого обдумывания значение auto заменено на 3px.

.container {
	background-size: 100% 3px;
}

Первый вариант
Указываем явно width и height в SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="203" height="3" viewBox="0 0 203 3">

Второй вариант
Используем preserveAspectRatio в значении xMinYMax (по умолчанию xMidYMid).

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax" viewBox="0 0 203 3">

Третий вариант
Используем width, height и preserveAspectRatio в значении none. С учётом Chrome самый бронебойный.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="203" height="3" viewBox="0 0 203 3">

1. Самый правильный вариант — ориентироваться на псевдокласс :hover и все нужные изменения описывать с помощью контекстного селектора

.round-trigger:hover .icon-add {
	// Тут всё, что нужно
}

2. Если уж так нужно именно менять класс, то, хотя бы, оставить смену класса именно у контейнера, что концептуально верно, и по аналогии с предыдущим

.round-trigger.round-edit .icon-add {
	// Тут всё, что нужно
}

3. Ну и для совсем тяжёлого случая менять класс вот так

$('.round-trigger').hover(
	function () {
		$('.icon-add', this).addClass('round-edit');
	},
	function () {$(
		'.icon-add', this).removeClass('round-edit');
	}
);

Вы столкнулись с багом FF
Решается в вашем случае так

HTML

<div id="test">
	<div class="button">1</div>
	<div class="button">2</div>
	<div class="button">3</div>
</div>

CSS

body {
	margin: 0;
}
#test {
	margin: 0 0 100px;
	background: #404040;
}
#test .button {
	float: left;
	padding: 10px 15px;
	color: #fff;
	background: #727272;
}
#test:after {
	content: "";
	display: table;
	clear: both;
}

Если фон однородный, в некоторых ситуациях может помочь box-shadow.
Пример: тык, пык

Магия псевдоэлементов и трансформаций