CSSで遊ぼう～トゲトゲの作り方～

uni

2024年8月31日 21:40

仕組みの解説

最終的な完成品はこちらから

ソースコードは長いので記事の最後に貼り付けておきます

STEP１放射線状に棒を配置

spanタグを１２個含んだdivタグにtogetogeクラスを設定することで、トゲトゲを作ります。

まずは１２個のspanを放射線状に並べます

次に中央から周囲方向へ少し移動させます

棒を中央向きの矢印のようにする

まず、１本だけで説明します。
spanタグでできている棒の先端に青線部分を追加して
矢印のような形状にします。

これを１２個すべてに行うと
青色部分がトゲトゲになっているじゃありませんか！！

後は調整

基本の線を削除

上下左右がとげになるように少し回転

案外できちゃいました

という感じにいい感じのトゲトゲを作ることができました！

軽く調べたところ見つからなかったので
私が第一人者を名乗ってもいいですかね？笑

作りたいと思ったものを実際に作れた瞬間が
プログラミングしてて一番楽しい時です！

次は塗りつぶされたトゲトゲを作りたいな

以下がソースコードです
気になる方は見てください

ソースコード

html

        <div class="togetoge float-left" radius="60">
            <span></span> <span></span> <span></span> <span></span>
            <span></span> <span></span> <span></span> <span></span>
            <span></span> <span></span> <span></span> <span></span>
        </div>

css

/* * * * * * * * * * * * * * * * * * * * * 
 * トゲトゲ
 * * * * * * * * * * * * * * * * * * * * */
.togetoge{
    position: relative;
    --radius: 50px;   /*　デフォルト 半径 */
    width: calc(var(--radius) * 2);
    height: calc(var(--radius) * 2);
    left: 100px;
}
/* 半径は変更可 */
.togetoge[radius="10"]{--radius: 10px;}
.togetoge[radius="20"]{--radius: 20px;}
.togetoge[radius="30"]{--radius: 30px;}
.togetoge[radius="40"]{--radius: 40px;}
.togetoge[radius="50"]{--radius: 50px;}
.togetoge[radius="60"]{--radius: 60px;}
.togetoge[radius="70"]{--radius: 70px;}
.togetoge[radius="80"]{--radius: 80px;}
.togetoge[radius="90"]{--radius: 90px;}
.togetoge[radius="100"]{--radius: 100px;}

/* 基準線(ただし非表示) */
.togetoge span{
    position: absolute;
    top: 50%; left: 50%;

    width: 1px;
    height: 50%;

    transform-origin: center center;
    transform: translate(-50%,-50%) rotate(calc(var(--angle) + 15deg)) translateY(calc(var(--radius) * -1));
}

/* 基準線を30度毎の放射線状に並べる */
.togetoge span:nth-of-type(1){--angle: calc(360deg / 12 * 0);}
.togetoge span:nth-of-type(2){--angle: calc(360deg / 12 * 1);}
.togetoge span:nth-of-type(3){--angle: calc(360deg / 12 * 2);}
.togetoge span:nth-of-type(4){--angle: calc(360deg / 12 * 3);}
.togetoge span:nth-of-type(5){--angle: calc(360deg / 12 * 4);}
.togetoge span:nth-of-type(6){--angle: calc(360deg / 12 * 5);}
.togetoge span:nth-of-type(7){--angle: calc(360deg / 12 * 6);}
.togetoge span:nth-of-type(8){--angle: calc(360deg / 12 * 7);}
.togetoge span:nth-of-type(9){--angle: calc(360deg / 12 * 8);}
.togetoge span:nth-of-type(10){--angle: calc(360deg / 12 * 9);}
.togetoge span:nth-of-type(11){--angle: calc(360deg / 12 * 10);}
.togetoge span:nth-of-type(12){--angle: calc(360deg / 12 * 11);}

 .togetoge span:before{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    background-image: linear-gradient(to bottom, transparent 57%,black 43%);

    transform-origin: center bottom;
    transform: rotate(32.5deg);
}
.togetoge span:after{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    background-image: linear-gradient(to bottom,transparent 57%,black 43%);

    transform-origin: center bottom;
    transform: rotate(-32.5deg);
}

~~noteってソースコードを書くのに向いていないのでは・・？~~

CSSで遊ぼう ～トゲトゲの作り方～