折り目を入れたおしゃれなCSS囲み枠3選

@ハクト 2023-08-01 12:10:35に投稿

今回は要素の角に折り目を入れてノート風にした囲み枠の作り方を紹介します。

「linear-gradient」で角を斜めにして、「before疑似要素」で三角の折り目を作っています。

以下、囲み枠とソースコードになります。

折り目に線を入れる

「linear-gradient」で右上角を透過にし、before疑似要素で右上に正方形を配置。「border」で左と下に線を引き「oveflow:hidden」ではみ出た正方形を隠してます。

<div class="box"><p>折り目を入れた囲..</p></div>

 

.box {
    position: relative;
    background-image: linear-gradient(
      -135deg, transparent 10px, #333 10px);
    overflow: hidden;
    ...
}
.box::before {
    position: absolute;
    content: '';
    right: 0px; top: 0px;
    width: 15px; height: 15px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
}

全てのソース

コードを表示 

<div class="box">
    <p>折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。</p>
</div>
.box {
    position: relative;
    padding: 1rem;
    background-image: linear-gradient(-135deg, transparent 10px, #333 10px);
    color: #212121;
    overflow: hidden;
}

.box::before {
    position: absolute;
    content: '';
    right: 0px;
    top: 0px;
    width: 15px;
    height: 15px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
}

.box p {
    color: white;
    line-height: 1.5;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

折り目に色を入れる

before疑似要素の「border-color」で色を入れてます

.box {
    position: relative;
    padding: 1rem;
    border-top: 3px solid #e74fb6;
    background-image: linear-gradient(
    　　-45deg, transparent 10px, #efefef 10px);
    color: #212121;
    overflow: hidden;
}
.box::before {
    position: absolute;
    right: 0px;　bottom: 0px;
    border-width: 0px 0px 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #e74fb6;
    content: '';
}

全てのソース

コードを表示 

<div class="box">
    <p>折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。</p>
</div>
.box {
    position: relative;
    padding: 1rem;
    border-top: 3px solid #e74fb6;
    background-image: linear-gradient(-45deg, transparent 10px, #efefef 10px);
    color: #212121;
    overflow: hidden;
}

.box::before {
    position: absolute;
    content: '';
    right: 0px;
    bottom: 0px;
    border-width: 0px 0px 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #e74fb6;
    box-shadow: 0 0 5px #000;
}

.box p {
    color: #333;
    line-height: 1.5;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

折り目に影を入れる

before疑似要素の「box-shadow」で影を入れて、「outline」で外枠に線を引いてます。

.box {
    position: relative;
    padding: 1rem;
    outline: 2px solid #A5D2E1;
    outline-offset: 2px;
    background-image: linear-gradient(-45deg, transparent 10px, #A5D2E1 10px);
    color: #212121;　overflow: hidden;
}
.box::before {
    position: absolute;
    right: 0px;　bottom: 0px;
    border-width: 0px 0px 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #A5D2E1;
    box-shadow: 0 0 5px #000;
    content: '';
}

全てのソース

コードを表示 

<div class="box">
    <p>折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。折り目を入れた囲み枠デザイン。</p>
</div>
.box {
    position: relative;
    padding: 1rem;
    outline: 2px solid #A5D2E1;
    outline-offset: 2px;
    background-image: linear-gradient(-45deg, transparent 10px, #A5D2E1 10px);
    color: #212121;
    overflow: hidden;
}

.box::before {
    position: absolute;
    content: '';
    right: 0px;
    bottom: 0px;
    border-width: 0px 0px 15px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #A5D2E1;
    box-shadow: 0 0 5px #000;
}

.box p {
    color: #333;
    line-height: 1.5;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

PR

在宅ワークで稼げるスキルを身につける テックアカデミーWeb制作講座
動画編集入門プラン（2ヶ月）用LP
css 囲み枠 折り目
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter