どうも！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%),
radial-gradient(30% 50%,#eeeedd 99%,#eeeedd00 100%),
radial-gradient(50% 50%,#ccccdd 99%,#ccccdd00 100%);
}
</style>
<div class="dogy">ドッグイヤーもどき</div>
欠点と対処法
（不自然ながらも）それっぽく見えてはいますが、このコードには欠点があります。
縦と横が同じ、正方形で描いていますが、もし縦横比が大きい場合。
width 280pxに対して、heightを580pxにしてみました。
この場合、めくれた角の位置が明らかにおかしいですよね。
この場合、めくれた角の位置が明らかにおかしいですよね。
↑こういう事になります。
対処方法としては、
にしてみました。
２か所ある30%の数値を調整します。ここでは、
background-image:
conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg),
radial-gradient(50% 40%,#eeeedd 99%,#eeeedd00 100%),
radial-gradient(30% 50%,#eeeedd 99%,#eeeedd00 100%),
radial-gradient(50% 50%,#ccccdd 99%,#ccccdd00 100%);
のように１つめを40%に変えてみました。
background-image:
conic-gradient(from 180deg,#eeeedd 0deg 270deg,#eeeedd00 271deg),
radial-gradient(50% 40%,#eeeedd 99%,#eeeedd00 100%),
radial-gradient(30% 50%,#eeeedd 99%,#eeeedd00 100%),
radial-gradient(50% 50%,#ccccdd 99%,#ccccdd00 100%);
のように１つめを40%に変えてみました。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
