Question

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

.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%;
}

使用相当大的图像是一个简单的修复，但我想看看我是否在尝试编写代码时遗漏了某些内容。

Answer 1

您是否尝试过以下JQuery plugin

如何获得穿过右上角的css三角形？

1 个答案: