Html 如何在css中提供边框作为背景，而不使用图像，也不添加任何标记？

举个例子

我想在红色区域上空拍摄

。如何在不使用image和另一个添加的更多元素的情况下制作

没有必要使用

边框

，我只想要这样的背景

---

在不使用任何额外标记的情况下，您可以做一些事情

在h1上应用负上边距：

h1{margin-top:-150px;}

h1{
 position:absolute;
 top:50px;
 left: 50px;   
}

绝对定位h1:

h1{margin-top:-150px;}

h1{
 position:absolute;
 top:50px;
 left: 50px;   
}

没有身体边界：

h1{margin-top:-150px;}

h1{
 position:absolute;
 top:50px;
 left: 50px;   
}

无需使用添加到主体的边框，您只需根据需要设置h1的样式：

body {background:yellow;margin:0;padding:0;}

h1{
    background-color:red;
    margin:0;
    height:150px;

}

更新

除了下面的评论之外，下面的示例可能更符合您的需要：

---

您可以使用此CSS规则：

h1 {
 border-top: 20px solid red;
 display: block;
}

---

我们可以用CSS中的任何其他方法制作这样的背景，而不是使用边框并定位

？看看我添加的内容。您可以简单地设置h1的样式，并删除正文+1中的边框（和填充），以便于您的努力，但实际上我还有其他元素，而不是

h1

，因此将红色赋予整个

h1

，对我来说不起作用。我想要的主要是身体的背景。CSS或HTML5 Gradient、canvas等中还有其他方法可以获得这样的背景吗？理想情况下，您只需要标题的容器元素。为什么我不能将此读取背景设置为

#标题

，因为我的标题将是固定宽度和居中的。但是

主体的红色边框是流动的。我可以用一个图像来实现这一点，但我只是想知道，在没有图像的情况下，是否有可能制作出这样的背景