0

所以我想在我的页面上有一个三角形作为背景,但我想在没有任何图像的情况下这样做。我已经尝试在我的 :before 元素上使用<aside>,但由于我需要 jquery 访问权限,因此我将其替换为位于旁边的 div (.triangle)。在桌面上看起来还不错,虽然对角线边缘有点锯齿状。下面的代码和这里的快照。

.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)上是模糊的而不是硬的,所以除非我在那里遗漏了一些东西,否则这也是一个死胡同。下面的代码和这里的快照。

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

使用相当大的图像很容易解决,但我想看看我在尝试编写代码时是否遗漏了一些东西。

4

1 回答 1

0

您是否尝试过以下 JQuery插件

于 2012-06-21T19:33:49.180 回答