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交叉響應

回答

相關問題