CSSのconic-gradientで直線的な模様を作る ― 2022年12月19日 11時11分
この記事はCSS Advent Calendar 2022の19日目の分です。
CSSのconic-gradient（扇形グラデーション）関数を使うと、円グラフや集中線のような表現ができます。ここであえて扇形の中心角の部分に注目し、直線的な模様を作ってみることはできないでしょうか？ いくつか試してみました。
例
例1. 二重のボーダー
「二重のボーダー」のCSSコード
p {
--outer-border-width: 1em;
--inner-border-width: 1em;
--outer-border-top-left-color: #1bf;
--inner-border-top-left-color: #35b;
--inner-border-bottom-right-color: #dc6;
--outer-border-bottom-right-color: #3a8;
margin: 0;
padding: 1em;
border: calc(var(--outer-border-width) + var(--inner-border-width)) solid transparent;
background:
conic-gradient(from 180deg at var(--outer-border-width) var(--outer-border-width), var(--outer-border-top-left-color) 270deg, transparent 270deg) no-repeat border-box 0 0 / calc(100% - var(--outer-border-width)) 100%,
conic-gradient(from 180deg at var(--inner-border-width) var(--inner-border-width), var(--inner-border-top-left-color) 270deg, transparent 270deg) no-repeat border-box var(--outer-border-width) var(--outer-border-width) / calc(100% - 2 * var(--outer-border-width) - var(--inner-border-width)) calc(100% - 2 * var(--outer-border-width)),
conic-gradient(from 0deg at calc(100% - var(--inner-border-width)) calc(100% - var(--inner-border-width)), var(--inner-border-bottom-right-color) 270deg, transparent 270deg) no-repeat border-box calc(var(--outer-border-width) + var(--inner-border-width)) var(--outer-border-width) / calc(100% - 2 * var(--outer-border-width) - var(--inner-border-width)) calc(100% - 2 * var(--outer-border-width)),
conic-gradient(from 0deg at calc(100% - var(--outer-border-width)) calc(100% - var(--outer-border-width)), var(--outer-border-bottom-right-color) 270deg, transparent 270deg) no-repeat border-box var(--outer-border-width) 0 / calc(100% - var(--outer-border-width)) 100%;
}
例2. 矢印
「矢印」のCSSコード
p {
--arrow-bg-color: #aaa;
--arrow-color: #ff5;
--arrow-angle: 120deg;
--arrow-from-angle: calc(180deg + var(--arrow-angle) / 2);
--arrow-outer-angle: calc(360deg - var(--arrow-angle));
--arrow-margin-left: 1em;
--arrow-width: 2em;
--arrow-center: calc(var(--arrow-width) / 2);
--arrow-offset: 1em;
margin: 0;
padding: 1em;
border: solid transparent;
border-width: 0 0 0 calc(var(--arrow-margin-left) + var(--arrow-width));
border-radius: 0.5em;
background: #ddd no-repeat border-box var(--arrow-margin-left) 0 / var(--arrow-width) 100%;
background-image:
conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(1 * var(--arrow-offset)), var(--arrow-bg-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(2 * var(--arrow-offset)), var(--arrow-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(3 * var(--arrow-offset)), var(--arrow-bg-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(4 * var(--arrow-offset)), var(--arrow-color) var(--arrow-outer-angle), var(--arrow-bg-color) var(--arrow-outer-angle));
}
例3. 星形
「星形」のCSSコード
p {
--outer-block-angle: 6deg;
--outer-inline-angle: 22deg;
--cone-angle: calc(90deg - var(--outer-block-angle) - var(--outer-inline-angle));
--cone-top-left-color: #bde;
--cone-top-right-color: #cae;
--cone-bottom-right-color: #ecc;
--cone-bottom-left-color: #ffb;
margin: 0;
padding: 2em 3em;
background:
conic-gradient(from calc(90deg + var(--outer-block-angle)) at 0 0, var(--cone-top-left-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 0 0 / 50% 50%,
conic-gradient(from calc(180deg + var(--outer-inline-angle)) at 100% 0, var(--cone-top-right-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 100% 0 / 50% 50%,
conic-gradient(from calc(270deg + var(--outer-block-angle)) at 100% 100%, var(--cone-bottom-right-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 100% 100% / 50% 50%,
conic-gradient(from var(--outer-inline-angle) at 0 100%, var(--cone-bottom-left-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 0 100% / 50% 50%;
}
例4. 吹き出し
「吹き出し」のCSSコード
p {
--bg-color: #fed;
--padding: 1em;
--border-width: 0.5em;
--border-color: #f93;
--border-radius: 1em;
--balloon-tail-angle: 60deg;
--balloon-tail-from-angle: calc(90deg - var(--balloon-tail-angle) / 2);
--balloon-tail-width: 2em;
--balloon-tail-height: calc(1.15470054 * var(--balloon-tail-width)); /* 1.15470054 = 2 / sqrt(3) */
--balloon-tail-bottom-offset: 1em;
margin: 0 0 0 var(--balloon-tail-width);
padding: var(--padding);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
background: var(--bg-color);
}
p::after {
content: '';
position: absolute;
display: block;
width: calc(var(--balloon-tail-width) + var(--border-width));
height: var(--balloon-tail-height);
background:
conic-gradient(from var(--balloon-tail-from-angle) at calc(2 * var(--border-width)) calc(var(--balloon-tail-height) / 2), var(--bg-color) var(--balloon-tail-angle), transparent var(--balloon-tail-angle)) no-repeat,
conic-gradient(from var(--balloon-tail-from-angle) at 0 calc(var(--balloon-tail-height) / 2), var(--border-color) var(--balloon-tail-angle), transparent var(--balloon-tail-angle)) no-repeat;
transform: translate(calc(0em - var(--padding) - var(--balloon-tail-width) - var(--border-width)), calc(var(--padding) + var(--border-width) - var(--border-radius) - var(--balloon-tail-height) - var(--balloon-tail-bottom-offset)));
}
感想
やってはみたもののどうも微妙です。直線的な模様ならだいたいはlinear-gradient関数で表現できますし、要素を切り抜くのならclip-pathプロパティのほうが自由度が高いです。conic-gradient関数を使えば記述量を減らせるかというと、そういうこともそんなになく、やはり目的外の利用はあまりうまくいかないのかもしれません。
今回ひとつ得られた教訓は、背景画像を使って疑似的にボーダーを表現する場合、疑似的なボーダーと同じ大きさの透明なボーダー（border: <border-wdith> solid transparent）を指定したほうがよいということです。そうすることで、overflow: autoで内容がはみ出したときなどにスクロール領域が疑似的なボーダーにかからず、より自然に見えます。
コメント
トラックバック
このエントリのトラックバックURL: http://nanto.asablo.jp/blog/2022/12/19/9549005/tb
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※投稿には管理者が設定した質問に答える必要があります。