borderについて

画像のような、赤、白、水色と色が変わる破線をcssで作成したいのですが
可能でしょうか？

どなたか分かる方いらっしゃいましたらお願い致します。

行動規範の内容に同意します

回答3件

既に回答されているとおり、border-imageプロパティとrepeating-linear-gradient関数を使うことで実現できると思います。今回の場合、以下のように行うことができます(IEでの動作は保障しません)。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            box-sizing: border-box;
9            margin: 0;
10            padding: 0;
11        }
12
13        .container {
14            display: flex;
15            height: 100vh;
16            background: #ffa;
17            justify-content: center;
18            align-items: center;
19        }
20
21        .box {
22            text-align: center;
23            border-top: 10px solid;
24            border-image: repeating-linear-gradient(
25                    90deg,
26                    #f69, #f69 calc(var(--color-stop) * 1),
27                    transparent calc(var(--color-stop) * 1), transparent calc(var(--color-stop) * 2),
28                    #cff calc(var(--color-stop) * 2), #cff calc(var(--color-stop) * 3)
29            ) 10;
30            --color-stop: 15px;
31            flex-basis: 100%;
32        }
33    </style>
34</head>
35<body>
36<div class="container">
37    <div class="box">border</div>
38</div>
39</body>
40</html>