I'm currently attempting to design a div element that resembles a trapezoid and would like to position text in its center. So far, I have successfully created a div with the top border shaped like a trapezoid. However, the text is centered within the div but not within the trapezoid shape itself. While I could manually adjust margins to center the text, this approach seems hacky and wouldn't ensure responsiveness across various screen sizes. My goal is to transform the entire body of the div into a trapezoid shape, which would simplify the text centering process. Despite conducting extensive research online, the solutions I've come across only focus on shaping either the top or bottom border as a trapezoid.
import React from 'react'
import "../css/WelcomeScreen.css"
function WelcomeVisitor(){
return (
<div className="parentView">
<div className="trapezoid">
<h1 className="welcomeText"> Welcome </h1>
</div>
</div>
)
}
export default WelcomeVisitor
.trapezoid {
border-top: 125px solid white;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 50%;
display: flex;
justify-content: center;
}
.welcomeText {
color: white;
display: flex;
}
.parentView {
display: flex;
border: 1px dotted red;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: space-between;
}