Я знаю, что можно перекосить, но я не вижу способа перекосить каждый угол с определенной степенью.
Здесь проект, над которым я работаю: http://map.ucf.edu/
Глядя на вкладки в меню. Прямо сейчас я использую изображения, я хотел бы изменить это для браузеров.
Я знаю, что можно создать CSS trapazoid, но это использует границы без содержимого. Конечный результат также требует немного закругленных углов.
изменить: Начиная с решение Zoltan Toth Я смог добиться этого: демонстрация
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; }