cssで作る4色のボーダーをあれこれ作ってみた。
cssでなんでも作れるようになってきたけど、
このデザインどうしたら作れるんだ?となるものを作ってみた。
↑サムネイル画像みたいなボーダーを画像ではなく作ろうとしたことを
きっかけに、4色で分かれたボーダーのサンプルです。
左上・右上・右下・左下で分かれたボーダーをつくる
HTML
<div class="rainbowBorder">
<p class="rainbowBorder__text">text</p>
</div>
CSS
.rainbowBorder {
padding: 6px;
position: relative;
}
.rainbowBorder::before {
background: linear-gradient(#132f6e 50%, #20418e 50%);
content: "";
height: 100%;
display: block;
left: 0;
position: absolute;
top: 0;
width: 50%;
z-index: 0;
}
.rainbowBorder::after {
background: linear-gradient(#5671b0 50%, #839ace 50%);
content: "";
height: 100%;
display: block;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 0;
}
.rainbowBorder__text {
background: #fff;
padding: .5rem;
position: relative;
z-index: 1;
}
円形で左上・右上・右下・左下で分かれたボーダーをつくる
同じ感じで円形です。こちらのcssは簡単。
HTML
<div class="rainbowCircle">
<p class="rainbowCircle__text">text</p>
</div>
CSS
.rainbowCircle {
border-top: 6px solid #132f6e;
border-right: 6px solid #20418e;
border-bottom: 6px solid #5671b0;
border-left: 6px solid #839ace;
border-radius: 50%;
height: 4rem;
transform: rotate(-45deg);
transform-origin: center;
width: 4rem;
}
.rainbowCircle__text {
left: 50%;
position: absolute;
top: 50%;
transform: rotate(45deg) translateX(-50%);
transform-origin: center;
}
円形で左上・右上・右下・左下で分かれた背景をつくる
同じだけどボーダーではなく、背景まで塗って欲しい時。
HTML
<div class="rainbowBackground">
<span class="rainbowBackground__text">A</span>
</div>
CSS
.rainbowBackground {
border-top: 2rem solid #132f6e;
border-right: 2rem solid #20418e;
border-bottom: 2rem solid #5671b0;
border-left: 2rem solid #839ace;
border-radius: 50%;
height: 0;
text-align: center;
transform: rotate(-45deg);
width: 0;
}
.rainbowBackground__text {
color: #fff;
font-size: 2rem;
font-weight: bold;
display: block;
transform: rotate(45deg) translate(-1.1rem, -.2rem);
}
【おまけ】4色に分かれた区切り線
hrに色を付けてます。
HTML
<div class="rainbowHr"></div>
CSS
.rainbowHr::before {
background: linear-gradient(to right, #132f6e 0%, #132f6e 25%, #20418e 25%, #20418e 50%, #5671b0 50%, #5671b0 75%, #839ace 75%, #839ace 100%);
display: block;
content: "";
height: 10px;
}