Кто нибудь объясните, как вышло изображение в форме треугольника(крыша домика)? Создал уже отдельно у себя файлы, воспроизвел в браузере, пытался менять значения, ничего подобного, теги селекторы стандартные, в чем подвох?
Никакого подвоха нет: замените белый в свойстве border: 150px solid white; на какой-нибудь отличный от него в
.roof {
width: 0;
margin: 0 auto;
margin-top: -50px;
border: 150px solid white;
border-bottom-color: red;
}`
И сделайте width отличной от нуля, равно как можете задать самостоятельно height с любым значением, закомментировав строку margin-top: -50px;
Что создало форму треугольника, объясните сам механизм? Со всеми элементами понятно, за исключением треугольника.
Ответ найден! Сочетание
*border: 200px solid (цвет);
border-(сторона)-color:(цвет);
дает такой эффект, причем в любую сторону.
При это ширина блока задаётся 0. А затем идут манипуляции с границами.