【コピペできるCSS】ぱんクズ

2021-8-3

meko

シンプルなリスト

• Home
• category
• breadcrumb

html

<ul class="breadcrumb">
    <li>Home</li>
    <li>category</li>
    <li>breadcrumb</li>
</ul>
Copy

css

.breadcrumb{ 
    display: flex; 
    justify-content:center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.breadcrumb li {
    padding: 1rem 0 1rem 1rem;
}
.breadcrumb li:not(:last-of-type)::after {
    content: ">";
    padding-left: 1rem;
}
Copy

ブロック風なリスト

• Home
• category
• breadcrumb

html

<ul class="breadcrumb">
    <li>Home</li>
    <li>category</li>
    <li>breadcrumb</li>
</ul>
Copy

css

    .breadcrumb{ 
        display: flex; 
        justify-content:center;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .breadcrumb li {
        padding: 1rem 3rem 1rem 1rem;
        background: #333;
        color: #fff;
        position: relative;
    }
    .breadcrumb li:last-of-type {
        padding-right: 1rem;
    }
    .breadcrumb li:not(:last-of-type)::after {
        content: "";
        position: absolute;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg) translate(-10%, -40%);
        display: inline-block;
        height: 3rem;
        width: 3rem;
    }
Copy

矢印のブロックリスト

• Home
• category
• breadcrumb

html

<ul class="breadcrumb">
    <li>Home</li>
    <li>category</li>
    <li>breadcrumb</li>
</ul>
Copy

css

    .breadcrumb{ 
        display: flex; 
        justify-content:center;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .breadcrumb li {
        padding: 1rem 3rem 1rem 1rem;
        background: #333;
        color: #fff;
        position: relative;
        z-index: 0;
    }
    .breadcrumb li:last-of-type {
        padding-right: 1rem;
    }
    .breadcrumb li:not(:last-of-type)::after {
        content: "";
        position: absolute;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg) translate(-10%, -40%);
        display: inline-block;
        height: 3rem;
        width: 3rem;
    }
    .breadcrumb li:last-of-type::after {
        content: "";
        background: #333;
        position: absolute;
        z-index: -1;
        transform: rotate(-45deg) translate(.15rem, -.5rem);
        display: inline-block;
        height: calc(2.6rem - 2px);
        width: calc(2.6rem - 2px);
    }
Copy