border dashed 破線を交互に違う色にする方法を教えてください？

Question

html5 css3だけでborder dashed の破線を交互に違う色にする方法を教えてください？
よろしくお願いいたします。例えは、赤破線　青破線　赤破線　青破線の順で枠を作成するとき。

Comments

[m.ts10806]

HTML及び、自身が調べたこと試したことを質問本文を編集して追記してください。

[jmsbndwo7]

以下は試してみてできなかった例です。
<div style="border-color dashed : red green; "></div>
<div style="border : 5px dashed ; color: red green; "></div>
など。

[m.ts10806]

質問本文を編集して追記してください。

[m.ts10806]

「交互に」というのがどうなったら良いのかこれだけでは分からないですしね。
図示も必要です。
単なる「color」だと文字色ですが、そのあたりは問題ないですか？

[jmsbndwo7]

枠を作成します。ー（破線赤色）ー（破線緑色）－（破線赤色）－（破線緑色）このような順序で色違いの破線を設定することができません。上下左右のそれそれ違う色にはできるのですが。

[m.ts10806]

質問本文を編集して追記してください。図示も必要です。

Answer 1

背景画像として上下左右分の線をlinear-gradientで用意して、元のdivに重ねています。
https://www.ameamelog.com/css-dotline/をかなり参考にさせていただきました。

<div class="border-bottom">test</div>

.border-test::after {
  content: "";
  background-image:
    linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
    linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
    linear-gradient(to bottom, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
    linear-gradient(to bottom, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px);
  background-size: 16px 1px, 16px 1px, 1px 16px, 1px 16px;
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

---

以下元の回答（下線の場合）
linear-gradientを利用した背景をx方向に並べることでそれっぽくなると思います。
線分の長さや太さは各数字を調整すれば変更できます。
いろいろいじってみてください。

<div class="border-bottom">test</div>

.border-bottom {
  background: linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px);
  background-repeat: repeat-x;
  background-size: 16px 1px;
  background-position: left bottom;
}

Comments

[dit.]

あ、下線じゃなくて「枠」が欲しいんですね。
希望通りではなさそうなので後で修正します。

[hatena19]

こちらの方法なら、疑似要素でなくても、要素のbackground-imageに直接設定してもよさそうですね。

[dit.]

hatena19さんの指摘で気づきました（参考サイトに引っ張られすぎました）が、要素そのものに指定して良さそうですね。
ご指摘ありがとうございました。
```css
.border-test {
background-image:
linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
linear-gradient(to right, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
linear-gradient(to bottom, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px),
linear-gradient(to bottom, #f00, #f00 3px, transparent 3px, transparent 8px, #00f 8px, #00f 11px, transparent 11px, transparent 16px);
background-size: 16px 1px, 16px 1px, 1px 16px, 1px 16px;
background-position: left top, left bottom, left top, right top;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
```

[hatena19]

私のがベストアンサーになっちゃいましたが、私の回答よりこちらの方がシンプルでいいですね。
高評価いれときます。

Answer 2

何をしたいのかよく分からないですが、推測でサンプル作成してみました。

下記のような感じでどうですか。

<h2 class="sample">sample</h2>

h2{
	font-size: 20px;
	color: #4169e1;
	font-weight: bold;
	margin: 10px;
	padding: 10px;
}

.sample {
  border-top: 3px solid;
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(
    90deg,
    red ,
    red 3px,
    #fff 3px,
    #fff 6px,
    blue 6px,
    blue 9px,
    #fff 9px,
    #fff 12px
  );
	border-image-slice: 1;
	border-image-repeat: repeat;
	position: relative;
}

.sample::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
  border-left: 3px solid;
  border-right: 3px solid;
  border-image: repeating-linear-gradient(
    0deg,
    red ,
    red 3px,
    #fff 3px,
    #fff 6px,
    blue 6px,
    blue 9px,
    #fff 9px,
    #fff 12px
  );
	border-image-slice: 1;
	border-image-repeat: repeat;
}

CodePenサンプル

Comments

[jmsbndwo7]

参考になりました。ありがとうございます。