純粋な CSS を使用して挿入ピルを作成しようとしています。
2 つのカラー ブロックが別々にクリックできる場所。
しかし、含まれている要素にボックスの影を適用する方法がわかりません。私が得た最も近いものは、:after
要素を使用してリンク上に配置することでした。しかし、それはリンクを覆い隠し、クリックできないようにします:
( jsFiddle )
<div class="pill">
<a href="#" class="plus">✚</a>
<a href="#" class="circle">⦿</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 プロパティについては知っていますが、ブラウザーのサポートはかなり貧弱です。
それで、私たちはどう思いますか?可能?