CSSを使用して、次のようなツールチップを作成しようとしています:
これは私がそれを解決しようとしている方法です: http://jsfiddle.net/NXLuZ/
だから、基本的に私はcss3マスキングを使用しています:
div:after {
width: 61px;
height: 10px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 10px at 0px 0, transparent 0, transparent 10px, black 11px);
top: -10px;
right: 0px;
position: absolute;
content: '';
display: block;
}
通常のディスプレイでは問題なく表示されますが、Retina ディスプレイで表示している場合や拡大しようとすると問題が発生することがあります。
グラデーションをマスクとして使用しているため、グラデーションで色が変わると少しぼやけて見えます。背景はその後ろに固定されていないため、丸みを帯びた角は透明にする必要があることに注意してください。
どうすればこの問題を解決できますか?