CSS трансформирование углов

@FastFrog · Регистрация: 26.12.2012

Author24 — интернет-сервис помощи студентам

Доброго времени суток! Возник такой вопрос. Если взглянуть на логотип WIN 8, то видно что у него в каждом из квадратов один из углов опущен. Дак вот, как сделать на чистом CSS этот самый опущенный угол?

@monochromer · 21.02.2015, 09:17

Можно сделать с помощью transform. В данном случае - с помощью поворота и перспективы.

CSS

.logo {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #06c;
    box-shadow:
        44px 0 0 #06c,
        0 44px 0#06c,
        44px 44px 0 #06c;
    transform:
        perspective(300px)
        rotateY(-35deg);
}

Но FF рендерит крайне отвратительно.

@FastFrog 10 / 10 / 4 Регистрация: 26.12.2012 Сообщений: 141
		1
	CSS трансформирование углов 21.02.2015, 08:19. Показов 982. Ответов 1 Метки нет (Все метки) Доброго времени суток! Возник такой вопрос. Если взглянуть на логотип WIN 8, то видно что у него в каждом из квадратов один из углов опущен. Дак вот, как сделать на чистом CSS этот самый опущенный угол? 0

	21.02.2015, 09:17