上下に斜めストライプを入れたCSSデザイン

Pocket

「repeating-linear-gradient」と「before」「after」疑似要素を使用し、斜めストライプを入れたテンプレを作りました。

上下に斜めストライプを入れた注意喚起用テンプレ

黒に黄色や赤色を入れた斜めストライプにすると目を引く注意喚起風のデザインになります。

セキュリティ関連の記事や注意書き、警告メッセージなどで使用すると効果的です。

「linear-gradient」関数とは

主にCSSの「background」プロパティに指定し、線型のグラデーションを生成します。今回ストライプをかける際もこのプロパティを応用して適用しています。

基本の構文は以下のとおりです。

background: linear-gradient(方向または角度, 開始色, 終了色);

方向

to top:下から上へ
to right:左から右へ
to bottom:上から下へ
to left:右から左へ

角度

0deg:下から上へ
90deg:左から右へ
180deg:上から下へ
270deg:右から左へ

 

以下は具体的な指定方法です。

background:linear-gradient(to left top, black, yellow);

右下から左上に向かうグラデーション

 

background:linear-gradient(90deg, black, yellow);

角度90度。左から右に向かうグラデーション

 

background:linear-gradient(45deg, black 0 50%, yellow 50% 100%);

45度に傾け、0〜50%まで黒、50%〜100%までが黄色にしたグラデーション

 

background:repeating-linear-gradient(45deg, black 0 5%, yellow 5% 10%);

45度に傾け、0〜5%まで黒、5%〜10%までが黄色にし、「repeating-linear-gradient」を指定するとストライプになります。

before、after疑似要素で上下に斜めストライプを設置

 今回のテンプレでは「repeating-linear-gradient」をbefore、after疑似要素に適用しています。

.box::before,
.box::after {
    position: fixed;
    height: 30px;
    width: 100%;
    content: '';
    background: repeating-linear-gradient(45deg, var(--main-color) 0, var(--main-color) 20px, var(--base-color) 20px, var(--base-color) 40px);
}

.box::before {
    top: 0;
    left: 0;
}

.box::after {
    bottom: 0;
    left: 0;
}

「position」プロパティに「fixed」を指定し、高さ「height」を30pxにしました。「top」と「bottom」を0にすることで上下に表示できます。

全てのHTML・CSSコード

<div class="pic-container pic-background">
    <div class="box">
        <div class="box-title">
            <p>工事中</p>
        </div>
        <div class="box-sub-title">
            <p>UNDER CONSTRUCTION</p>
        </div>
    </div>
</div>
:root {
    /* ベースカラー */
    --base-color: #0c0c0c;
    /* メインカラー */
    --main-color: #ffbb33;
}

.pic-container {
    width: 600px;
    height: 338px;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    background-color: var(--base-color);
    font-family: GenEiNuGothicEB;
    text-align: center;
}



.box-title p {
    position: relative;
    margin: 0 0 0.5rem;
    color: var(--main-color);
    font-size: 75px;
}


.box-sub-title p {
    position: relative;
    padding: 0.3rem 0.2rem;
    background-color: var(--main-color);
    color: var(--base-color);
    font-size: 12px;
}

.box-sub-title p::before,
.box-sub-title p::after {
    padding: 0 0.5rem;
    font-family: "Font Awesome 5 Free";
    content: "\f071";
    color: var(--base-color);
    font-weight: 900;
}



.box::before,
.box::after {
    position: fixed;
    height: 30px;
    width: 100%;
    content: '';
    background: repeating-linear-gradient(45deg, var(--main-color) 0, var(--main-color) 20px, var(--base-color) 20px, var(--base-color) 40px);
}

.box::before {
    top: 0;
    left: 0;
}

.box::after {
    bottom: 0;
    left: 0;
}

サブタイトルの文字の前後にfontawesome5のアイコンをに表示しています。

こちらも「before」「after」疑似要素に指定しました。

 

テンプレは以下より使用可能です。

上下に斜めストライプを入れた注意喚起用テンプレ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です