【CSS小ネタ】radialなドッグイヤーもどき - Little Strange Software

【CSS小ネタ】radialなドッグイヤーもどき - Little Strange Software

どうも！LSSです！！ CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の...概要を表示 どうも！LSSです！！ CSSで表現されるものに「ドッグイヤー」と呼ばれるものがあります。 ちょうど紙の角を少し、45度に折ったような表現で、使われている例もCSSコードもあちこちで見かけます。 今回は「ピシッと折ったドッグイヤーではなく、ふんわりめくれたような表現」をradial-gradientで考えてみました。 ドッグイヤーもどき コード 欠点と対処法 ドッグイヤーもどき ドッグイヤーもどき コード <style> .dogy{ width:280px; height:280px; padding:10px; background-image: conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg), radial-gradient(50% 30%,#eeeedd 99%,#eeeedd00 100%), ra