小编Piy*_*yan的帖子

我使用以下css创建了一个倾斜的div

#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来取消文本的倾斜效果.

但是我在div3中只使用了一个div就达到了相同的效果

看小提琴:http://jsfiddle.net/5a7rhh0L/

如果我使用更多文本在div 3中执行相同操作则会失真.但在div2的情况下不是这样,使用2个div的文本更多.

我完全清楚这里发生了什么.我想知道DIV2是否只能使用一个div来实现,即<div id="inner-div">Context<br>Hello</div>现在不使用两个div,即内部和外部div.