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;
}