Html 仅使用一个 div 倾斜一侧的 div 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26075318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Skew div border of one side only using one div only
提问by Piyush Kumar Baliyan
I have created a skewed div using following css
我使用以下 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;
}
And used two divs i.e. outer div to skew border and div and inner div to cancel the skew effect for text.
并使用了两个 div，即外层 div 来倾斜边框，使用 div 和内层 div 来取消文本的倾斜效果。
But I have achieved same effect using only one div in div3
但是我在 div3 中只使用一个 div 就达到了同样的效果
Look at fiddle: http://jsfiddle.net/5a7rhh0L/
看小提琴：http: //jsfiddle.net/5a7rhh0L/
IF I do the same as in div 3 with more text it gets distorted. But not so in case of div2 with more text using 2 divs.
如果我在 div 3 中使用更多文本做同样的事情，它会被扭曲。但在 div2 使用 2 个 div 的更多文本的情况下，情况并非如此。
I am completely aware of what is happening here. I want to know if DIV2 can be achieved using only one div i.e. <div id="inner-div">Context<br>Hello</div>and now without using two divs i.e. inner and outer one.
我完全知道这里发生了什么。我想知道是否可以仅使用一个 div 来实现 DIV2，即<div id="inner-div">Context<br>Hello</div>现在不使用两个 div，即内部和外部一个。
回答by Wouter Florijn
I believe this is what you want:
我相信这就是你想要的：
http://jsfiddle.net/5a7rhh0L/3/
http://jsfiddle.net/5a7rhh0L/3/
CSS:
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);
}
