在div的背景的多种背景颜色

Question

嘿，我正在努力用CSS创建多个颜色背景。我试过了gradient，但是它产生了我不想要的阴影。我想用CSS创建它：

有没有人知道如何在我使用gradient时获得的阴影中创建它。

这是我的HTML代码。

<div id="head">
        <h1>Mira's place</h1><br>
        <h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
        <ul>
            <li>Home</li>
            <li>Games</li>
            <li>Applications</li>
            <li>Contact</li>
        </ul>    
</div>

Answer 1

使用渐变再次尝试，但使用此代码：

#head /* or body */
{
        -webkit-background-size: 40px 40px;
        -moz-background-size: 40px 40px;
        background-size: 40px 40px;         
        background-image: -webkit-gradient(linear, left top, right bottom,
                                color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);

         -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);       
         box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         width: 100%;
         border: 1px solid;
         color: #fff;
         padding: 15px;
         position: fixed;
         _position: absolute;
         text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

BTW：我从www.red-team-design.com获得了这段代码。这是link。

Answer 2

不知道，你的阴影是什么意思。以下看起来不像你想要的吗？ （可能需要进行一些修改，但它显示了可行的方法）

background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);

这是Fiddle。

Answer 3

.element{
    border-bottom: 25px solid #2C58DF;
    border-top: 25px solid #D71E26;
    height: 25px;
    width: 150px;
    -webkit-transform-origin: top left;
    -webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
    -moz-transform-origin: top left;
    -moz-transform: translateX(165px) translateY(55px) rotate(135deg);
    transform: translateX(165px) translateY(55px) rotate(135deg);
    transform-origin: left top 0;
}

http://jsfiddle.net/etW25/