Slants交叉响应

有没有办法创建类似HTML/CSS附件，它的工作响应？没有使用我的形象？Slants交叉响应

无法获取oragne边境&内容 CSS

.left { 

    border-bottom: 70px solid #3488b1; 
    border-right: 1000px solid transparent; 
    height: 0; 
    position: absolute; 
    bottom:0; 
width: 1px; 
opacity:.5; 
} 
.right { 
    border-bottom: 70px solid #3488b1; 
    border-left: 1000px solid transparent; 
    height: 0; 
width: 1px; 
position: absolute; 
bottom:0; 
} 

.footer {height:100px;}

& HTML添加

<div class="footer"> 
<span class="left"> </span> 
<span class="right"></span> 
</div>

Is there anyway to create similar to the attached with HTML/CSS

来源

2015-05-29 Mel

是的。你有什么尝试？ – daker

一个好的起点是[这里]（http://jsfiddle.net/josedvq/3HG6d/） –

寻求调试帮助的问题（“为什么不是这个代码工作？”）必须包含所需的行为，特定的问题或错误以及在问题本身**中重现**所需的最短代码。请参阅[**如何创建一个最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

一种方法是使用转换。

html, body { 
 
    height:100%; 
 
    width:100%; 
 
} 
 
#responsive { 
 
    position:relative; 
 
    height:25%; 
 
    width:80%; 
 
    overflow:hidden; 
 
    min-height: 80px; 
 
} 
 
#triOne { 
 
    position:absolute; 
 
    background-color:aqua; 
 
    height:300%; 
 
    width:300%; 
 
    transform: rotate(10deg); 
 
    top:55%; 
 
    left:-100%; 
 
} 
 
#triTwo { 
 
    position:absolute; 
 
    background-color:blue; 
 
    height:300%; 
 
    width:300%; 
 
    border: 5px solid orange; 
 
    transform: rotate(-10deg); 
 
    top:45%; 
 
    right:-100%; 
 
} 
 
#content { 
 
    position:absolute; 
 
    right:10px; 
 
    bottom:10px; 
 
    color:white; 
 
}

<div id="responsive"> 
 
    <div id="triOne"></div> 
 
    <div id="triTwo"></div> 
 
    <div id="content">content</div> 
 
</div>

这不是真正的响应，但我认为有一些调整，你应该能够得到它，你想要的方式。

来源

2015-05-29 12:49:31

他不是在说这个朋友。 –

@ UI-UX我编辑了一点，因为第一个版本是错误的，但我认为该方法是有效的。不过，我很想学习不同的方法。 –

现在好了，这是正确的答案欣赏它:) –

Slants交叉响应

回答

相关问题