Наклонить границу div только с одной стороны
Я создал перекос Div с использованием следующего CSS
#outer-left{
-ms-transform: skew(-30deg,0deg); /* IE 9 */
-webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(-30deg,0deg);
background:#333333;
width:200px;
z-index:20;
border-bottom:3px solid #2E8DEF;
padding:10px 30px 10px 75px;
font-size:20px;
color:#2E8DEF;
position:relative;
left:-50px;
}
#outer-left:after{
content:"";
display:inline-block;
position:absolute;
width:20px;
height:100%;
background:#2E8DEF;
float:right;
right:0px;
top:0px;
z-index:10;
}
#inner-left{
-ms-transform: skew(30deg,0deg); /* IE 9 */
-webkit-transform: skew(30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(30deg,0deg);
display:inline-block;
}
И использовал два элемента div, то есть внешний элемент div для перекоса границы, а элемент div и внутренний элемент div для отмены эффекта перекоса для текста.
Но я достиг того же эффекта, используя только один div в div3
Посмотрите на скрипку:http://jsfiddle.net/5a7rhh0L/
Если я делаю то же самое, что и в div 3, с большим количеством текста он искажается. Но не так в случае div2 с большим количеством текста, используя 2 div.
Я полностью осознаю, что здесь происходит. Я хочу знать, можно ли достичь DIV2, используя только один div, т.е.<div id="inner-div">Context<br>Hello</div>
и теперь без использования двух div, то есть внутреннего и внешнего.