2017-06-22 56 views
4

我一直在寻找几天的代码,以使div的右边缘倾斜45度。以下是对我特别企图得到一个形象的例子...如何实现倾斜的右边缘div?

Enter image description here

似乎那里有很多的“倾斜的边缘” div的例子,但我无法找到任何与特别是右倾斜。

我花了很多时间试图改变其他人的代码,但最终变得一团糟。

这是原来的CSS代码我用得到我需要的结果试验...

div { 
     position: relative; 
     display: inline-block; 
     padding: 1em 5em 1em 1em; 
     overflow: hidden; 
     color: #fff; 
    } 

    div:after { 
     content: ''; 
     position: absolute; 
     top: 0; left: 0; 
     width: 100%; height: 100%; 
     background: #000; 
     -webkit-transform-origin: 100% 0; 
     -ms-transform-origin: 100% 0; 
     transform-origin: 100% 0; 
     -webkit-transform: skew(-45deg); 
     -ms-transform: skew(-45deg); 
     transform: skew(-45deg); 
     z-index: -1; 
    } 

    body { 
     background: 
     url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg'); 
     background-size: cover; 
    } 

下面是HTML ....

<div>Slanted div text</div> 
    <div> 
     Slanted div text<br/> 
     on several lines<br/> 
     Another line 
    </div> 
    <div>Wider slanted div text with more text inside</div> 
+0

您将需要结合2个或3的div,具有负的右内侧一个偏移,并通过旋转的东西像'变换:旋转(45deg)' –

+0

基思...我是我理解'抵消'足以试验你的建议。 –

回答

2

创建DIV,然后叠加绝对定位的旋转伪元素以创建倾斜的印象。

div { 
 
    height: 50px; 
 
    width: 300px; 
 
    background-color: black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
div:after { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: white; 
 
    position: absolute; 
 
    content: ""; 
 
    transform: rotate(45deg); 
 
    transform-origin: bottom right; 
 
}
<div></div>

+1

太棒了!谢谢! –

+0

虽然迈克尔还有另外一个问题,但是我怎样才能把文本放在div里而不会让整个事情崩溃? –

+1

我不确定你想要完成什么(例如,简单文本,长文本,横幅符号,长段落等)。但是这里有一种方法可能适用于你:https://jsfiddle.net/q1gnpea7/ –