CSS Угол заточен

Мне было интересно, возможно ли иметь простой и чистый чисто CSS способ получить острый угол на объекте. На данный момент я работаю с таким уголком

.main navigation {
background-color: #14377d;
padding-right: 10px;
padding-left: 10px;
border-right: solid #2d71ba;
border-bottom-right-radius: 25px 25px;
width: 134px;
line-height: 25px;
text-align: left;
}

Но это сделает углы закругленными. То, что я хотел бы иметь, это срез нижнего правого угла. Пример:

https://i.imgur.com/gkkdS2t.jpg

Спасибо всем, что нашли время, чтобы прочитать это,

Сьерд


cornerradius css
person Sjoerd89    schedule 18.05.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я бы, вероятно, использовал clip-path и polygon() для этого:

div {
  background-color: #2C2F33;
  height: 200px;
  width: 300px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
}
<div></div>

В основном, как работает polygon(), вы можете определить через каждую запятую позицию x-y: polygon(x1 y1, x2 y2, ...). Используя проценты, где 100% — это полная заданная ширина или высота, вы можете создать любую линейную форму.

person Emonadeo    schedule 18.05.2017
comment
Я думаю, что это действительно сработает, теперь мне нужно поиграть с процентом. Спасибо! - person Sjoerd89; 18.05.2017

arrow_upward
1
arrow_downward

Возможно, вам будет полезен этот метод: Пример скрипки. Он основан на функции polygon и свойстве clip-path.

person Vlad Dekhanov    schedule 18.05.2017

arrow_upward
0
arrow_downward

Я закончил тем, что использовал

polygon(100% 0, 100% 75%, 90% 100%, 0 100%, 0 0);

Спасибо! Навигация по веб-сайту близка к тому месту, где я хочу! Спасибо, ребята

person Sjoerd89    schedule 18.05.2017