Я знаю, что возможно наклонить, но я не вижу способа наклонить каждый угол с определенной степенью.
Вот проект, над которым я работаю: http://map.ucf.edu/
Смотря конкретно на вкладки в меню.Прямо сейчас я использую изображения, я хотел бы изменить это для способных браузеров.
Я знаю, что можно создать трапазоид CSS , но это использует границы без содержимого.Конечному результату также нужно немного закругленных углов.
edit: Начиная с решения Золтана Тота Мне удалось добиться этого: demo
div {
height: 20px;
padding:2px 5px 0 5px;
color:white;
background: rgba(0,0,0,.5);
margin: 0 10px;
position: relative;
border-top-left-radius: 6px 4px;
border-top-right-radius: 6px 4px;
font-family:sans-serif;
font-size:13px;
line-height:20px;
vertical-align:bottom;
display:inline-block;
white-space:nowrap;
}
div:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 19px solid rgba(0,0,0,.5);
border-left: 9px solid transparent;
position: absolute;
bottom: 0;
left: -9px;
}
div:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 19px solid rgba(0,0,0,.5);
border-right: 9px solid transparent;
position: absolute;
bottom: 0;
right: -9px;
}
.b { background:black; margin:0 -7px 0 20px; }
.b:after, .b:before { border-bottom-color:black; }