I'd like to design something like this with CSS but I need to know the name to google it. I tried to Google similar images to no avail.
1 Answer
The two yellow rectangles make an Art Deco style border.
But I doubt that'll be helpful in terms of Cascading Style Sheets (CSS). It's not possible to use the border
property in CSS to create such a thing.
There may be a few ways in CSS to construct something similar. Just off the top of my head .. using absolute positioning and 2 divs could work:
<div id="A">
<div id="B">
<h1>A bunch of stuff here</h1>
</div>
</div>
#A {
position: absolute;
top: 0;
left: 25px;
display: block;
width: 550px;
height: 450px;
border: 2px solid #a00;
}
#B {
position: absolute;
top: 25px;
left: -25px;
z-index: 5;
display: block;
width: 600px;
height: 400px;
border: 2px solid #a00;
text-align: center;
}
(...or you could use pseudo elements (::before or ::after) to create the second div.)
background-image