この記事はCSS Advent Calendar 2022の19日目の分です。
CSSのconic-gradient
(扇形グラデーション)関数を使うと、円グラフや集中線のような表現ができます。ここであえて扇形の中心角の部分に注目し、直線的な模様を作ってみることはできないでしょうか? いくつか試してみました。
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%;
}
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));
}
セコメントをする