создать css3 форму с использованием свойств границы

Question

Я нашел этот фрагмент кода в http://www.css3shapes.com/, но я не могу понять логику, лежащую в его основе. Я имею в виду, что знаю функцию до и после селектора. То, с чем я смущен, - это то, почему в коде есть { height:0; width:40px; }. Если кто-то может дать полное объяснение этому коду, он будет весьма признателен.

#octagon { 
    width: 100px; 
    height: 100px; 
    background: blue; 
} 
#octagon:before { 
    height: 0; 
    width: 40px; 
    content:""; 
    position: absolute; 
    border-bottom: 30px solid blue; 
    border-left: 30px solid white; 
    border-right: 30px solid white; 
} 
#octagon:after { 
    height: 0; 
    width: 40px; 
    content:""; 
    position: absolute; 
    border-top: 30px solid blue; 
    border-left: 30px solid white; 
    border-right: 30px solid white; 
    margin: 70px 0 0 0; 
} 

Answer 1

Это трюк, чтобы заставить css визуализировать треугольную форму. Проверьте #octagon: before {...}

Пограничный снизу определяет высоту элемента. Границы на боках добавляют к определенной ширине, придавая форме ширину 100 пикселей.

Вы можете себе представить, что высота: 0 действует как точка схода на расстоянии. Обе стороны двигаться к ней, но в этом случае никогда не достигают его, так как ширина (100) больше, чем высота 30.

Разница между треугольником и восьмиугольником является дополнительной шириной:

width: 40px; 

Играйте с его примером: http://jsfiddle.net/mXTrG/ Серый - это бордюры, а синий - нижняя граница.

Это имеет смысл? Дайте знать, если у вас появятся вопросы!

Answer 2

Если изменить несколько цветов, которые вы можете увидеть, что происходит: «после» немного походит на верхнюю часть скошенной фоторамки: В верхней части рамы красная, стороны зеленый & синий, но нет дна, а размер «рисунка» в кадре - ширина 40, высота нуля (т. Е. Линия вдоль нижнего края красного бита).

Если добавить недостающую дно, и сделать высоту 40, вы можете увидеть весь кадр: