一边的Skew div边框只使用一个div [英] Skew div border of one side only using one div only
问题描述
我使用以下css创建了一个歪斜的div
I have created a skewed div using following 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取消文字的偏斜效果。
And used two divs i.e. outer div to skew border and div and inner div to cancel the skew effect for text.
但我已经在div3中只使用一个div实现了相同的效果
But I have achieved same effect using only one div in div3
如果我做与div 3相同的更多的文本,它被扭曲。
但是如果div2有更多的文本使用2 divs。
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.
我完全知道这里发生了什么。我想知道如果DIV2只能使用一个div < div id =inner-div>上下文< br> Hello< / div>
没有使用两个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.
推荐答案
我相信这是你想要的:
http://jsfiddle.net/5a7rhh0L/3/
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);
}
这篇关于一边的Skew div边框只使用一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!