仅使用一个div倾斜一侧的div边框

Piyush Kumar Baliyan 发表于 Dev

Piyush Kumar Baliyan

我使用以下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/

如果我在第3格中所做的与更多文本相同，则它会失真。但是在div2中使用2个div的文本较多的情况下不是这样。

我完全知道这里发生了什么。我想知道DIV2是否可以仅使用一个div来实现，<div id="inner-div">Context<br>Hello</div>而现在却不使用两个div，即内部和外部div。

伍特·弗洛里恩（Wouter Florijn）

我相信这就是您想要的：

http://jsfiddle.net/5a7rhh0L/3/

CSS：

#a {
    position: relative;
    width: 120px;
    padding: 10px 20px;
    font-size: 20px;
    position: relative;

    color: #2E8DEF;
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
}
#a:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;

    background: #333333;
    border-bottom: 3px solid #2E8DEF;
    border-right: 20px solid #2E8DEF;

    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}