How to nest text into shapes #floating_trapezoid?

How to nest text into shapes #floating_trapezoid?
0

#1

I’m trying to make a floating scroll bar with a trapezoid sitting at the bottom center of the bar. I’d get my text to live at the center of the trapezoid for each page/section heading. How do I align my text to the center of the trap?

Note, most of the code isn’t optimized- still trying/learning a few thing.

Codepen Link


#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


#3

Hello there!

The problem is because the trapezoid is created with paddings—which means that there aren’t actually any space inside <div class="trapezoid"></div> to hold the text. Before going into the potential solutions, I recommend changing border-bottom to margin-bottom if it’s there to create space between elements in your layout—this makes positioning easier and more intuitive in, particularly, the second case:

.trapezoid {
    margin-bottom: 100px;
    ...
}

You could then try one of the following ways to center text inside the trapezoid shape.

###1. Pseudo-element

With this method you will have to remove the text that is currently sitting between <div></div>. Please note that the top property is manually set to half of the height of the trapezoid and transform: translate() is used to adjust the difference because offset by the height and width of the text:

.trapezoid::before {
    position: absolute;
    top: -40px;
    left: 50%;
    content: "About Me";
    transform: translate(-50%, -50%);
    color: white;
}

In addition, and if you require more than one trapezoid with different text in them (which I assume is your case), you will have to set the text in the CSS for each element. This can be done using the :nth-child() selector as in the following example:

HTML

<div>
    <div class="trapezoid"></div>
    <div class="trapezoid"></div>
    <div class="trapezoid"></div>
</div>

CSS

.trapezoid::before {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.trapezoid:nth-child(1)::before {
    content: "Home";
}

.trapezoid:nth-child(2)::before {
    content: "About Me";
}

.trapezoid:nth-child(3)::before {
    content: "Contact";
}

###2. Multiple <div>'s

With this method you use a wrapper <div>'s to wrap separate <div>'s of the trapezoid and text. Note that <div class="wrapper"></div> is set to be an inline-block to allow for percentage positioning (horizontal, specifically) because a <div> is block-level elements by default. The rest should be relatively straightforward or already covered above!

HTML

<div class="wrapper">
    <div class="trapezoidx"></div>
    <div class="text">About Me</div>
</div>

CSS

.wrapper {
    display: inline-block;
    position: relative;
}

.trapezoid {/* As above */}

.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

I hope that helps! :slight_smile:


#4

honmanyau Thanks a million! Thanks for taking the time out to explain it your suggestions. I also wasn’t familiar with the use of wrappers (among other things). I will, try to play around with each of your suggestions to make sure I fully understand and let you know how it goes.