在一個div創建一個半透明的響應三角

-3

我試圖創建一個半透明的敏感三角形，它只是一個側面的邊框在一個div在一個div創建一個半透明的響應三角

有色我發現，使用2個三角形，並把它們放在頂部的方式在線但一個問題是，我想的三角形是半透明的，所以div的背景圖片可以看出

事情是這樣的：http://i.imgur.com/ZxHc3jV.jpg

非常感謝您的幫助和任何幫助將不勝感激！

.container { 
 
\t width: 33.33%; 
 
\t height: 500px; 
 
\t background: blue; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
} 
 
\t 
 
.triangle { 
 
\t width: 100%; 
 
\t height: 0; 
 
\t padding-top:100%; 
 
\t overflow: hidden; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t right: 0; 
 
} 
 
.triangle:after { 
 
\t content: ""; 
 
\t display: block; 
 
\t width: 0; 
 
\t height: 0; 
 
\t margin-top:-500px; 
 
\t border-top: 500px solid transparent; 
 
\t border-right: 500px solid #4679BD; 
 
}

<body> 
 
    \t <div class="container"> 
 
\t  <div class="triangle"></div> 
 
    </div> 
 

 
</body>

來源

2017-01-23 Francis L.

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

嗨！我已將代碼片段添加到主帖子中，在完整頁面中運行並調整瀏覽器大小;它是響應式的，但我想讓外邊框有一個2px的純藍色邊框（如https://i.imgur.com/ZxHc3jV.jpg），有可能嗎？ –

我不明白爲什麼你要這樣做，爲什麼不是正常的png/jpg在角落？ – Qchmqs

你要像下面的東西： -

.triangle{ 
 
    width:0px; 
 
    height:0px; 
 
    border-bottom:87px solid red; 
 
    border-left:87px solid white; 
 

 
}

<body> 
 
    <div class="triangle"></div> 
 
    </body>

來源

2017-01-23 15:19:55

好的，我會試試.... –

非常感謝！ –

在一個div創建一個半透明的響應三角

回答

相關問題