More than 5 years have passed since last update.

傾けた要素の周囲に付く細い線の消し方

Last updated at 2020-02-19Posted at 2020-02-19

はじめに

CSS で吹き出しなどを作成する際に疑似要素などを用いて矢印を作成したりしますが、そのとき少し悩まされた現象があったので備忘録として。。

傾きのある要素を別の要素に重ねると、傾きのある要素の周囲に細い線が見える。
よく見ないと気付かないのですが、outline でも box-shadow でもない何かが表示されてしまっています。

傾きのある要素に backface-visibility: hidden; を適用する。

疑似要素の backface-visibility を切り替えてみると、適用前は疑似要素の周りがギザギザ？になっているのが分かります。
https://jsfiddle.net/yshrkn/9m17qL6a/

普段使用しないプロパティだったので30分ほどハマりました。