菜鳥切版3 線條

1.美術大大很愛用線條
2.我的 CSS 太爛ㄌ
3.寫在 php laravel blade，通用類別用 Tailwind
4.還沒做完，先筆記

1. 普通的底線

    <div class="stripes" style="
        background: repeating-linear-gradient(180deg,DodgerBlue 0.05em, DodgerBlue 0.1em, white  0.1em, white 0.3em);
        height:1em;
        ">
    </div>
   

1. 標題的裝飾線

元件

<div class="relative">
    <div class="stripes mt-4" style="
        background: repeating-linear-gradient(180deg,DodgerBlue 0.05em, DodgerBlue 0.1em, white  0.1em, white 0.3em);
        height:1em;
    "></div>
    <h2 style="
        position: absolute;
        top: -1em;
    ">{{ $title }}</h2>
</div>

容器
包第一層是容器 讓線條滿版
第二層要綁一起不然文字和線會分離

<div class="md:grid md:col-span-1 ">
{{-- <div>ad</div> --}}

    <div>
        <x-stripes.title title="社群活動" />
        @for ($i = 0; $i < 4; $i++)
        {{-- @component('future.card_event')
        @endcomponent --}}
        <x-cards.side_event />
        @endfor
    </div>

</div>

3.多重斜線

    <div class="flex bg-blue-600 pr-4 relative">
        <img src="http://fakeimg.pl/400x300/" alt="">
        <div class="py-4 px-2 bottom-0 right-0" style="
        position: absolute;
        z-index: 1;
        background-color:#3182ce;
        background-image:linear-gradient(135deg, transparent 12px, white 12px,white 13px, transparent 13px ),linear-gradient(135deg, transparent 14px, white 14px,white 15px, transparent 15px ),linear-gradient(135deg, transparent 16px, white 16px,white 17px, transparent 17px ),linear-gradient(135deg, transparent 18px, white 18px,white 19px, transparent 19px ), linear-gradient(135deg, transparent 20px, white 20px,white 21px, transparent 21px );
        "></div>
    </div>

    <div class="flex bg-blue-600 pr-4 relative">
        <img src="http://fakeimg.pl/400x300/" alt="">
        <div class="flex justify-end ">
            <div class="pb-8 px-2 bottom-0 right-0 " style="
            position: absolute;
            z-index: 1;
            background-color:#3182ce;
            background-image:linear-gradient(315deg, transparent 10px, white 10px,white 11px, transparent 11px ), linear-gradient(315deg, transparent 14px, white 14px,white 15px, transparent 15px ),linear-gradient(315deg, transparent 18px, white 18px,white 19px, transparent 19px ), linear-gradient(315deg, transparent 22px, white 22px,white 23px, transparent 23px );
            "></div>
        </div>
    </div>

4.多重斜線．改

            <div class="">
                <x-stripes.title title="社群活動" />
                <div class="flex bg-blue-600 justify-end ">
                    <div class="py-2  pr-8" style="
                    background-color:#3182ce;
                    background-image:linear-gradient(135deg, transparent 12px, white 12px,white 13px, transparent 13px ),linear-gradient(135deg, transparent 14px, white 14px,white 15px, transparent 15px ),linear-gradient(135deg, transparent 16px, white 16px,white 17px, transparent 17px ),linear-gradient(135deg, transparent 18px, white 18px,white 19px, transparent 19px ), linear-gradient(135deg, transparent 20px, white 20px,white 21px, transparent 21px );
                    "></div>
                </div>

                @for ($i = 0; $i < 4; $i++)
                <x-cards.side_event />
                @endfor
            </div>