如何制作 multi-colored header

Question

非常简单的问题，你能做出一个像下面快速 MS 绘画图像中演示的那样的 header 吗？我不知道这在 HTML/CSS 中是否可行，我对这一切还比较陌生：https://i.stack.imgur.com/V5IuV.png

Answer 1

#main {
  border: 2px solid black;
  width: 400px;
  height: 100px;
  background: linear-gradient(135deg, red 50%, white 0 100%);
}

<div id="main">
  <p>some text</p>
</div>

Answer 2

只需添加linear-gradient

您可以使用 CSS 制作一个，只需将其放在元素的 CSS 中，使其背景成为您想要的多色。 `背景：rgb(131,58,180);背景：linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);`

如果您想知道它是如何工作的，那就是指定多色的 linear-gradient

片段

.multi {
  border: 5px black;
  width: 700px;
  height: 200px;
  background: rgb(131,58,180);
  background: linear-gradient(130deg, rgba(131,58,180,1) 0%, rgba(252,176,69,1) 100%);
}

<div class="multi">
  <h2>Your custom text...</h2>
</div>

一些有用的链接。

Css grandit 生成器：https://cssgradient.io/
W3scools 解释：https://www.w3schools.com/CSSref/func_radial-gradient.asp

如何制作 multi-colored header

How to make a multi-colored header

html

css

colors

header

只需添加linear-gradient

片段