【CSS】内側のボーダーでくり抜いたような長方形の作り方
![](https://chiiweb.net/media/wp-content/uploads/2024/06/border-shape.jpg)
330
この記事を書いている人
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
からの距離を表しているので、透明くり抜き部分の太さになるという感じですね。
外側の白い部分はボーダーでできています。
![ボーダーの太さ](https://chiiweb.net/media/wp-content/uploads/2024/06/border-weight.jpg)
.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してね♡↓
画像を横から徐々に表示するCSSアニメーション 超基本【CSS】ボタンの”ホバーエフェクト”とりあえずこれ
コメントは承認後に表示されます。