Как добиться эффекта стекирования с помощью HTML и CSS?

Question

Как достигается этот стиль с использованием html и css? Это похоже на три деления, однако при проверке через консоль может показаться, что ::before может использоваться.

Также кто-нибудь знает, как можно назвать этот стиль, чтобы я мог обновить название этого вопроса, чтобы оно было более конкретным?

Я взял это изображение и пример отсюда http://todomvc.com/examples/react/#/

Answer 1

Глядя в код, довольно просто узнать, как они достигли этого эффекта. Stacked box-shadows.

.footer:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
        0 8px 0 -3px #f6f6f6,
        0 9px 1px -3px rgba(0, 0, 0, 0.2),
        0 16px 0 -6px #f6f6f6,
        0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

Но, безусловно, есть и другие способы сделать это, в зависимости от ваших потребностей.