Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【謎CSS】バクダンになりそこねた囲み枠

 どうも!LSSです!!

 

以前、CSSSVGを併用した、

little-strange.hatenablog.com

というコード記事をあげていました。

バクダンってアレです。広告の特価品や、漫画でいうと叫んでる吹き出しに使われる、トゲトゲの囲み枠ですね。

 

SVGを使うと本当に表現の幅がグンと広がる、広がり過ぎて面白くないぐらいですが、CSSだけで近いものは作れないか?ってな事を考えていました。

 

で、思いついた方法をひとつ試してみたのですが…出来上がりはなんとも言えないものになり、しばらく下書きに眠らせていたのですが…置いておいたところで使い途が思いつくわけでもなく、ここに晒してみる事にしました。

 

 

バクダンになりそこねた囲み枠

囲み枠、なんですが、どうもしっくりこない^^;
バクダンと呼ばれる囲み枠を目指したはずでしたが…。

 

 

コード

<style>
.bkdn{
height:300px;
padding:30px;
background:
linear-gradient(to top right,transparent 48%,black,transparent 52%) 0 0/25% 20px no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 33.3% 0/25% 20px no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 66.6% 0/25% 20px no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 100% 0/25% 20px no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 0 100%/25% 20px no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 33.3% 100%/25% 20px no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 66.6% 100%/25% 20px no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 100% 100%/25% 20px no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 0 0/20px 25% no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 0 33.3%/20px 25% no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 0 66.6%/20px 25% no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 0 100%/20px 25% no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 100% 0/20px 25% no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 100% 33.3%/20px 25% no-repeat,
linear-gradient(to top left,transparent 48%,black,transparent 52%) 100% 66.6%/20px 25% no-repeat,
linear-gradient(to top right,transparent 48%,black,transparent 52%) 100% 100%/20px 25% no-repeat;
}
</style>
<div class="bkdn">囲み枠、なんですが、どうもしっくりこない^^;<br />バクダンと呼ばれる囲み枠を目指したはずでしたが…。</div>

 

 

やたら大量のlinear-gradient

コードの大部分が、

linear-gradient(to top right,transparent 48%,black,transparent 52%) 0 0/25% 20px no-repeat,

という感じのlinear-gradientに占められています。

 

このlinear-gradientひとつが1本の線となり、4辺がそれぞれ4本の線で構築されているので、計16個のlinear-gradientという事になります。

0 0の部分はbackground-position(位置)、25% 20pxの部分はbackground-size(サイズ)。20pxがこの枠線のために取った幅という事になります。

to top rightの部分の指定により対角線を引く事ができ、それが繋がるように16本分定義する事で囲み枠になっています。

 

幅以外の箇所を%で指定する事によって、ブラウザ画面のサイズが違っても囲み枠としての繋がりは保たれるのは長所ですが(縦横比は変わります)…一体、この囲み枠はなんなんでしょうね?w

 

一応、発展として考えられるのは「1辺あたりの本数(現在4)を変える」ような事は可能です。

それによって出来たカタチによっては、何かに見立てる事ができたりする…のかな??

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^