Help Putting text over a shape

[Oceanic Mind]

I really wish I knew how to title these but the problem is that I don't know how to explain what I'm doing succinctly. Anyway.

abcdefgG

•••

•••

•••

•••

Spoiler

[border=0; margin:auto; width:99%; height:300px; display:flex; flex-flow:row nowrap; align-content:center; align-items:center;][border=0; margin:auto; width:50%;]
[border=0; min-height:60px; height:auto; background:#175B64; overflow:hidden; font-size:16px; color:#F4ED05;]abcdefgG [comment]

[/comment][border=0; padding:0 0 0 5px; border-left:3.5px solid #43B6AC; float:right; height:60px; width:6%; display:flex; flex-flow:column nowrap;][border=5px solid #43B6AC; margin:auto; border-radius:50%; height:18px; width:18px; padding:0;][/border][border=0; margin:auto; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border]
[border=0; height:0px; width:30%; float:right; margin-top:-10px; border-top: 45px solid #175B64; border-left: 50px solid transparent; padding:0 0 0 10px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border][/border]

I Have Created A Little Trapezoid-Esque Thing, as you can see there. I want the little yellow boxes to go over the shape (not what they're going to be when I'm done, just placeholders atm.) the PROBLEM is that I made the shape via manipulation of the border colors, and I can't figure out how to make the contents overlap the border (probably because... they're not supposed to...) If you have any suggestions/work arounds that would be super cool, I look forward to seeing something I was completely blind to before. Thanks in advance! (also sorry if my code is a wreck)

 

[weldherwings]

do you mean like this? It’s because your border top is 45px with zero height - so I just made a border tag around the boxes, and moved the margin up!

abcdefgG

•••

•••

•••

•••

 [border=0; margin:auto; width:99%; height:300px; display:flex; flex-flow:row nowrap; align-content:center; align-items:center;][border=0; margin:auto; width:50%;]
[border=0; min-height:60px; height:auto; background:#175B64; overflow:hidden; font-size:16px; color:#F4ED05;]abcdefgG [comment]

[/comment][border=0; padding:0 0 0 5px; border-left:3.5px solid #43B6AC; float:right; height:60px; width:6%; display:flex; flex-flow:column nowrap;][border=5px solid #43B6AC; margin:auto; border-radius:50%; height:18px; width:18px; padding:0;][/border][border=0; margin:auto; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border]
[border=0; height:0px; width:30%; float:right; margin-top:-10px; border-top: 45px solid #175B64; border-left: 50px solid transparent; padding:0 0 0 10px;][border=0px; padding:0px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start; width:100%; margin-top: -35px]

[border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border][/border][/border]

 

[Uxie]

since i noticed you used flexboxes, throwing in another solution as well that's slightly more extra but will give the same result!!! in simple terms: splitting your trapezoid into a right-angled triangle and a rectangle, putting the mock-trapezoid into a flex container & having all of your content sit in the rectangle, which is what i believe you were hoping to achieve as well! (* ^ ω ^)

[border=0; margin:auto; width:99%; height:300px; display:flex; flex-flow:row nowrap; align-content:center; align-items:center;][border=0; margin:auto; width:50%;]
[border=0; min-height:60px; height:auto; background:#175B64; overflow:hidden; font-size:16px; color:#F4ED05;]abcdefgG [comment]

[/comment][border=0; padding:0 0 0 5px; border-left:3.5px solid #43B6AC; float:right; height:60px; width:6%; display:flex; flex-flow:column nowrap;][border=5px solid #43B6AC; margin:auto; border-radius:50%; height:18px; width:18px; padding:0;][/border][border=0; margin:auto; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border]
[border=0; /*the new container! had to eyeball & adjust the width based on your original size, since the borders in your original code added extra width*/ height:auto; width:40%; padding:0; display:flex; flex-flow:row nowrap; margin-top:-10px; float:right;][border=0; /*the triangle of the trapezoid*/ height:0; border-top:45px solid #175B64; border-left:50px solid transparent; padding:0; flex-shrink:0;][/border][border=0; /*the rectangle of the trapezoid aka where your content goes*/ height:45px; flex:1; padding:0 0 0 10px; background: #175B64; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; position:relative;][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][border=0; height:22px; width:25px; background:#F4ED05; color:#175B64; padding:0; text-align:center; font-weight:bold; font-size:15px; letter-spacing:1px;]•••[/border][/border][/border][/border][/border]

abcdefgG

•••

•••

•••

•••

 

[Oceanic Mind]

Uxie weldherwings Thank you both so much!! I imagined there was something I could do with another border tag, but just couldn't figure out what, and I suppose I was just too tired to simply make the shape a different way-- anyway these solutions will work perfectly!! Thank you again :>!!