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

【问题标题】：Skew div border of one side only using one div only仅使用一个 div 倾斜一侧的 div 边框
【发布时间】：2014-11-22 09:28:50
【问题描述】：

我使用以下 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 即内部和外部一个。

【问题讨论】：

那个小提琴似乎不起作用。此外，问题似乎类似于stackoverflow.com/questions/25993033/…
@Harry，在那个链接中，额外的边框是三角形的，在我的问题中，额外的边框是平行四边形。但尽管这给了我一个提示如何做到这一点。
是的，伙计，你只需要调整伪元素的位置（第二个使用skew）。
您能告诉我们为什么您只想使用一个 div 吗？我的意思是确定 HTML 可能看起来更好，但它可能需要一些 hackish CSS。
@WouterFlorijn 正如你所说，HTML 看起来会更好。这里的问题是我必须在整个页面上使用这些元素至少 30 到 40 次。在 css 中，它只需要定义一次。所以，我想要一个更干净的 html，以便管理和修改。我想到的第二种方式是使用JS动态添加额外的html。但如果它只能由一个 div 完成，那就更好了。

标签： html css frontend css-transforms

【解决方案1】：

我相信这就是你想要的：

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);
}

【讨论】：