What is the best way to design a trapezoid-shaped div with perfectly centered text?

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;
}

https://i.sstatic.net/fd3Lx.png

https://i.sstatic.net/Y7x13.png

Answer №1

If you want to create text in a trapezoid shape, using the clip-path property is the most straightforward method.

Here's an example that should suit your needs:

clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);

This property allows you to define the background shape of your element.

Below is an updated snippet with your code:

.parentView {
  display: flex;
  border: 1px dotted red;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: space-between;
  background: #000;
}

.trapezoid {
  background: #fff;
  width: 50%;
  display: flex;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}

.welcomeText {
  color: red;
  display: flex;
}
<div class="parentView">
  <div class="trapezoid">
    <h1 class="welcomeText"> Welcome </h1>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing variables upon the page being refreshed

Is there a way to retain certain data even when the page is refreshed? I have some values stored in an array and would like to keep them without losing them upon refreshing. ...

The unique key issue is encountered with React table 7

I am currently utilizing React Table 7 to create my table components, and while the tables are rendering successfully, I keep receiving a warning stating that Each child in a list must have a unique "key" prop. Despite adding keys to both the map function ...

Updating the status of a checkbox array within the reducer to reflect changes made in the user interface

I've implemented something similar in React: const CheckboxItems = (t) => [ { checked: true, value: 'itemsCancelled', id: 'checkBoxItemsCancelled', labelText: t('cancellations.checkBoxItemsCancelled&apos ...

Using Sass to Loop through Specific Items

Currently, I am in the process of developing a SASS loop to iterate over a series of images (let's say 50). My goal is to increment the transition delay by 50ms for every nth-of-type image. However, it appears that the current for loop I have implemen ...

Tips for centering a <div> vertically within another <div> ?

I have a project to develop a shopping cart, and I am currently working on aligning my item total in the center of its container. Here is the code snippet I have so far: .itemInfo { display: table; width: 100%; } .itemTotal { display: table-cel ...

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

Converting Ajax to JSON with Jquery offline and Manifest for enhanced offline web applications

Looking to create an offline web application, I'm in the process of transitioning from Ajax to JSON using JQuery offline. Here is the initial Ajax code: $.ajax({ url: contentpage, data: contentpagedata, cache: false }).done(function( html ) { ...

Output the result of a MySQLI query using PHP's echo function

I am attempting to output my PHP while loop within an html echo. Essentially, I want to echo within another echo. Is this achievable? Below is the code snippet: <?php session_start(); require 'config.php'; if (@$_SESSION['username&ap ...

How to disable typescript eslint notifications in the terminal for .js and .jsx files within a create-react-app project using VS Code

I'm currently in the process of transitioning from JavaScript to TypeScript within my create-react-app project. I am facing an issue where new ESLint TypeScript warnings are being flagged for my old .js and .jsx files, which is something I want to avo ...

Avoiding the unnecessary re-rendering of input fields in React when their values change

I am developing a form that is dynamically generated using JSON data fetched from an API. The JSON structure includes information about the input elements to be rendered, such as name, type, placeholder, validation rules, and more. { name: { elemen ...

Determine the height of a DIV element and its contents using JQuery

In this div, there are various elements present: <div class="menuItem designMenu" id="dMenu"> <ul class="menuList menu"> <li class="menuHeader">Design</li> <li class="projectHeader">Mother</li> <li clas ...

What is the term for the visual display of a product through a photo gallery or slideshow?

Can someone help me identify what the item I'm looking for? You can click on the link to see an example of the product: sephora product example What is the technical term for the section that contains product pictures and slides? Are there any librar ...

Experiencing difficulties in displaying a React element that is being passed as a prop

One of my components looks like this: const Chip = (props) => { const ChipIcon = props.icon; let deleteButton = null; if (!props.readOnly) { deleteButton = <Delete style={styles.deleteButton} onTouchTap={props.onRemove} /& ...

Remove the blue outline in Fancybox when clicked

Does anyone know how to remove the default blue outline that appears after opening and closing an image or video in Fancybox 3? It disappears when clicked next to, but I would like to get rid of it completely. Any help is appreciated. https://i.stack.imgu ...

Can I insert JavaScript code in any location within an HTML file?

Typically, Javascript code is placed in the header section of HTML code. <head> <script type="text/javascript" language="javascript" src="core.js"></script> ... </head> However, I've tested putting Javascript code in the body ...

It's not possible to add additional options to the select input in a react

Hi there! I'm currently facing an issue while trying to retrieve a list of options from the backend, map them to another list of options, and add them to a main list. Unfortunately, my attempts have not been successful. Could anyone offer some advice ...

What is the best way to create a map in React that allows for changing the state without affecting all elements?

When working with a JSON file containing various values, one of them being "iframe" which can hold either "si" (yes) or "no" based on whether it should include an iframe. With this value (yes/no), I need (this.props.tabsiframe === 'yes') to deter ...

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

Obtaining a worldwide JavaScript variable through AJAX JSON query

Hello, I have encountered an issue while using this code for my AJAX JSON request. When attempting to make jsonObj a global variable and then console.log() it, the debugger console shows that it is always coming up as undefined. To explain my question fur ...