0

純粋な CSS を使用して挿入ピルを作成しようとしています。

ここに画像の説明を入力

2 つのカラー ブロックが別々にクリックできる場所。

しかし、含まれている要素にボックスの影を適用する方法がわかりません。私が得た最も近いものは、:after要素を使用してリンク上に配置することでした。しかし、それはリンクを覆い隠し、クリックできないようにします:

( jsFiddle )

<div class="pill">
    <a href="#" class="plus">&#10010;</a>
    <a href="#" class="circle">&#10687;</a>
</div><!--/.pill-->


.pill {
    position: relative;
    float: left;
    &:after {
        content: "";
        display: block;
        border-radius: 8px;
        box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    a {
        display: block;
        padding: 4px 6px;
        text-decoration: none;
        color: #fff;
        float: left;
        &.plus {
            background: #3c55b1;
            border-radius: 8px 0 0 8px;
            border-right: 1px solid darken(#3c55b1, 30%);
        }
        &.circle {
            background: #40be84;
            border-radius: 0 8px 8px 0;
            border-left: 1px solid lighten(#40be84, 15%);
        }
    }
}

pointer-events プロパティについては知っていますが、ブラウザーのサポートはかなり貧弱です。

それで、私たちはどう思いますか?可能?

4

2 に答える 2

1

ボックス シャドウでスプレッド プロパティを使用していないため、境界線を作成する代わりに、ボックス シャドウを使用して各要素に境界線を追加します。

:afterプロパティを削除すると、通常の動作になります

jsフィドル

于 2013-07-11T16:54:33.700 に答える