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

Question

So I would like to have a triangle on my page, as a background, but I would like to do it without any images. I have already tried using a :before element on my <aside> , but since I need jquery access, I replaced it with a div (.triangle) that sits within the aside. On the desktop it looked okay, though the diagonal edge was kind of jagged. Code below and snapshot 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;
}

I tried using "border-width: 3000px;", but the element then started accounting for quite a scroll (obviously).

Next I tried using a CSS3 gradient and that worked, but the color-stop transition was blurry rather than hard on my phone (iPhone 4) so unless I'm missing something there, that's a dead end too. Code below and snapshot 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%;
}

Using a rather big image is an easy fix, but I'd like to see if I missed something while trying to code this.

Answer 1

您是否尝试过以下JQuery 插件