怎么用css做出这张图来

我是为学生，今天学了css，但是我没听明白，不知道怎么用css做出这张图，就大家解答

 <style>
        body {
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
        }

        #grad {
            width: 900px;
            height: 100px;
            padding-top: 50px;
            background-image: radial-gradient(red 5%, yellow 15%, green 60%);
        }
    </style>
    <div id="grad">
        字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文则试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    </div>

大致就这样子？可以去w3school学习下

没给什么素材吗？ 纯自己实现 。

红白相间的 可以用 背景图实现 也可以 用 css实现 。

中间绿色这个 看起来 有渐变 。