如何获得穿过右上角的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三角形？

回答

相关问题