webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【CSS】内側のボーダーでくり抜いたような長方形の作り方

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

KATAKORI SHINDOI

↑こんな感じのです。

HTML

擬似要素を使ったりする方法を考えたのですが、もっと簡単にインナー箱を用意することにしました。

<div class="waku">
    <div class="waku-inner">
      <p>KATAKORI SHINDOI</p>
    </div>
</div>

CSS

.waku {
	border: 10px solid rgba(255,255,255,.6);
	text-align:center;
}
.waku-inner {
	background: rgba(255,255,255,.6);
	margin: 3px;
	padding: 2em;
}

ポイントは、.waku-innerに置いているmarginですかね。

このmarginが、.wakuからの距離を表しているので、透明くり抜き部分の太さになるという感じですね。

外側の白い部分はボーダーでできています。

ボーダーの太さ

.wakuのボーダーの太さを調整すれば太くしたり細くしたりできます。

border: 10px solid rgba(255,255,255,.6);

こちらの10pxというところの太さをいじってください。

rgba(255,255,255,.6);は、.waku-innerの背景色と同じ色を指定してください。

KATAKORI SHINDOI

テキストをグラデーションにする

テキストをグラデーションにする場合はこちら↓

.waku-inner p {
	background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

円形も

TOKUNI MIGIGAITAI

.waku { 
	border: 10px solid rgba(255,255,255,.6);
	text-align:center;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.waku .waku-inner {
	background: rgba(255,255,255,.6);
	margin: 3px;
	padding: 2em;
    width: 174px;
    height: 174px;
    border-radius: 50%;
    display: flex;
    align-items: center;
} 

いいなと思ったら
TAPしてね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【CSS】内側のボーダーでくり抜いたような長方形の作り方

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。