I am attempting to replicate a design similar to this:
https://i.sstatic.net/pJPBj.png
In this design, the ribbon in the middle is an image, while the gradients surrounding it are created using CSS.
My objective is to have an element act as the title on a page, with the ribbon displayed beneath that title. The desired code structure would be something like this:
<h1 class="page-title">This is a Title</h1>
To achieve this, I attempted the following approach:
h1.page-title {
display: block;
}
h1.page-title::after {
content: url(./path/to/image);
display: block;
}
While this successfully added the image below the title, I encountered difficulty incorporating the gradients, as multiple pseudo after-elements cannot be added simultaneously.
My goal is to accomplish this effect using only one HTML tag if possible, though I have also been unsuccessful in achieving this with two tags. Any assistance or guidance on this matter would be greatly appreciated.
EDIT: The final output I aim for should resemble this: