bulletを三角にするUserCSS

おもちゃ箱みたいな雰囲気を出したい

図形の形をした木のブロックを思い出す

三角が一番それっぽさ感じるので三角にする

code:style.css

.line .indent-mark .dot {

clip-path: polygon(50% 0%, 0% 86%, 100% 86%);

width: 0.5em;

height: 0.5em;

border-radius: 0%;

}

clip-pathはいいぞ

趣味でくるくる回しておく

これよくないアフォーダンスを与えてしまいそう

押しても何も起きません

code:rotate-solid.css

.line:nth-child(4n+1) .dot {

transform: rotateZ(0deg);

}

.line:nth-child(4n+2) .dot {

transform: rotateZ(90deg);

}

.line:nth-child(4n+3) .dot {

transform: rotateZ(180deg);

}

.line:nth-child(4n+4) .dot {

transform: rotateZ(270deg);

}

検証用に書いたアニメーションするやつ

code:rotate-anime.css

@keyframes rotate {

from {

transform: rotateZ( 0deg );

}

to {

transform: rotateZ( 360deg );

}

}

.dot {

animation-direction: normal;

animation-duration: 0.5s;

animation-iteration-count: infinite;

animation-name: rotate;

animation-timing-function: linear;

}