画像を使わずCSSで可変スペース部分の逆角丸を作成する方法【CSS】

最終更新日：2025-03-19

公開日：2025-03-19

ページ内に広告が含まれています。

CSSで角丸はよく使用しますが、逆角丸の場合は画像を使ったり、CSSではclip-pathプロパティやmask-imageプロパティを使用している記事をよく目にします。
最近は逆角丸を使用したデザインも増えてきているのですが、可変スペースで使用する逆角丸の場合は上記では対応しきれない案件がありました。今回は可変スペースで役に立つ逆角丸の作成の仕方を解説していきます。

可変スペースでの逆角丸の使用例
逆角丸の作り方
さいごに

可変スペースでの逆角丸の使用例

まずは以下の逆角丸の使用例をご覧ください。

ここに文章が入ります。ここに文章が入ります。

上記例のように、右下にある白いボックスの左下に逆角丸を作成しています。テキストの量が増えても問題ないように、max-widthプロパティで最大横幅を指定しデザインが崩れないようにしています。
このような逆角丸をCSSだけで作成できますので、次項で詳しく解説していきます。

逆角丸の作り方

それでは詳しく解説していきます。まずは各ソースをご覧ください。

HTML

<div class="container">
    <img src="/file/sample_img.jpg">
    <p>ここに文章が入ります。ここに文章が入ります。<span class="corner"></span></p>
</div>

HTMLは特に複雑ではありません。画像の上にpタグでテキストを重ねています。
ここでポイントになるのが、pタグの中にあるspanタグです。このspanタグが逆角丸を作成する要素となっています。

CSS

.container {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    position: relative;
    overflow: hidden;
}
.container p {
    max-width: calc(100% - 40px);
    padding: 15px 20px;
    border-top-left-radius: 15px;
    background-color: #FFF;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.container .corner {
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    overflow: hidden;
}
.container .corner::before {
    content: "";
    width: 200%;
    height: 200%;
    display: block;
    border-radius: 50%;
    box-shadow: 15px 15px 0 0 #FFF;
    transform: translate(-50%, -50%);
}

上記が実際のCSSになります。ここでポイントになるのが以下となります。

全体を囲う.containerの左上・右上・左下に角丸15pxを指定
テキストを入れるpタグの左上に15pxの角丸を指定し、テキスト量によって横幅が可変になるようmax-widthで最大幅を指定
pタグの中のspanタグ(.corner)の大きさを角丸の大きさに合わせてposition: absolute;で配置しtransform: translateX(-100%);でずらす、overflow: hidden;ではみ出した部分を隠す
.cornerの疑似要素::beforeを、親要素の200%の大きさにしてborder-radius: 50%;で円にし、box-shadowプロパティで影を付ける(逆角丸を作成)

以上が可変スペースに逆角丸を作成する方法となります。

直近で、実際に今回のようなデザインをコーディングする機会がありましたが、その際は全体の背景にグラデーションがかかっていたため今回のやり方は出来ずCSSでのマスクで対応しましたが、このようなデザインの場合は今回の方法で大体は対応可能かと思います。用途に合わせて色々と試してみてください。