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

2024/06/28 330

この記事を書いている人

Marie

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

もっと詳しくみる

KATAKORI SHINDOI

↑こんな感じのです。

[目次]

1 HTML
2 CSS
3 テキストをグラデーションにする
4 円形も

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してね♡↓

ブログランキング参加中
ポチっとしてくれると嬉しいです

コピペ用コード