如何獲得穿過右上角的css三角形？

所以我想在我的頁面上有一個三角形作爲背景，但是我希望沒有任何圖像。我已經嘗試過在我的<aside>上使用a：before元素，但由於我需要jQuery訪問，我用位於旁邊的div（.triangle）替換了它。在桌面上看起來沒問題，儘管對角邊緣有點鋸齒。下面的代碼和快照here。如何獲得穿過右上角的css三角形？

.triangle 
{ 
    position: absolute; 
    top: 0; right: 0; 
    z-index: -1; 
    width: 0; height: 0; 
    border: solid transparent; 
    border-top-color: #CDC7D2; 
    border-left-color: #CDC7D2; 
}

我試過使用「border-width：3000px;」，但是這個元素然後開始佔一個相當滾動（顯然）。

接下來，我嘗試使用CSS3漸變，並工作，但顏色停止過渡模糊，而不是在我的手機（iPhone 4）上很難，所以除非我失去了一些東西，這也是一個死衚衕。下面的代碼和快照here。

body 
{ 
    background-image: -webkit-linear-gradient(315deg, #CDC7D2 50%, #FFFFFF 50%); 
    -webkit-background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}

使用相當大的圖像是一個簡單的辦法，但我想看看，如果我錯過了什麼，同時試圖代碼這一點。

來源

2012-04-12 Florian

您是否嘗試過以下的JQuery plugin

來源

2012-06-21 19:33:49

此插件不支持三角形 – 2012-10-20 06:43:33

如何獲得穿過右上角的css三角形？

回答

相關問題