CSS Border Corner Shape

Мы видели несколько новых широко распространенных функций CSS3, таких как «Закругленный угол», «Коробка тени» и «Текст тени», и это лишь некоторые из них. Тем не менее, есть несколько экспериментальных функций, таких как то, что мы собираемся обсудить в этом посте: Форма границы угла,

Border Corner Shape позволяет нам манипулировать углами элементов дальше. В то время как мы можем создавать закругленные углы, используя border-radius, Border Corner Shape позволяет нам формировать скошенные углы, углы в стиле совка и углы в виде прямоугольника.
Как это использовать
Мы используем border-corner-shape для определения формы. На момент написания он принимает четыре предопределенных фигуры со следующими значениями: кривая, совок, скос и вырез – также предлагается использовать кубический Безье для формирования произвольной фигуры (увидеть предложение здесь).

Стоит отметить, что форма border-corner-shape объявляет только форму, а длина формы указывается с помощью свойства border-radius. Таким образом, чтобы увидеть результат, при формировании фигуры эти два свойства должны быть объявлены вместе.

.box {
цвет фона: # 3498DB;
форма границы-угла: совок;
радиус границы: 30 пикселей;
ширина: 200 пикселей;
высота: 200 пикселей;
}

Учитывая пример приведенных выше правил стиля, мы получим результат, как показано на следующем снимке экрана.
Давайте посмотрим на еще один пример. На этот раз мы указываем форму угла для скоса и устанавливаем радиус границы на 50%, кроме нижнего правого угла, следующим образом.

.box {
цвет фона: # 3498DB;
форма границы-угла: скос;
радиус границы: 50% 50% 0% 50%;
ширина: 200 пикселей;
высота: 200 пикселей;
}

Приведенные выше правила стиля дадут нам следующий результат.
Это довольно увлекательно, не правда ли?