1

私が作成しているサイトでは、次のブロックを作成する必要があります。

代替テキスト

以下の HTML で使用すると、丸みを帯びたエッジと影のある白いボックスを作成する次の CSS があります。

<style type="text/css">
    .stripeblock {
        width: 310px;
        border-radius: 12px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 8px 6px -6px black;
    }
</style>

<div class="stripeblock">
    <h1>Just some title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to...</p>
</div>

欠けているのは緑の横縞だけです。いくつか試してみましたが、うまく入れられません。
div 内の別の要素ではなく、CSS を介して含めたいと思います。
これは可能ですか？

4

2 に答える 2

3

余分な画像やマークアップなしで、これを行うことができます。

':before' 疑似要素を使用して、ブロックのスタイルを設定し、必要な場所に配置します。

これを試して：

.stripeblock:before {
    background: #c8d300;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    top:0;
    left: 20px;
    width: 125px;   
}

そして、ブロックへの追加が正しく配置されていることを確認position: relative;してください。.stribeblock:before;

.stribeblock {
    position: relative;
}

ここで結果を確認してください: http://jsfiddle.net/qVFeT/

于 2013-02-04T15:26:01.017 に答える
1

さて、背景画像でそれを行います

.stripeblock {
    width: 310px;
    border-radius: 12px;
    /*background-color: #fff;*/
    background:#fff url('some-rectangular-green-image.gif') no-repeat 0 0;
    padding: 10px;
    box-shadow: 0 8px 6px -6px black;
}
于 2013-02-04T15:23:09.863 に答える