html - 如何使用居中文字创建梯形div？

我正在尝试创建一个形状像梯形的div，并希望将文本放在中间。我目前有一个div，其顶部边框的形状像梯形。问题在于文本位于div的中心，而不位于梯形的中心。我可以更改页边距，然后手动将文本放置在中间，但这太过分了，需要布局以响应不同的屏幕尺寸。我想使div的主体成为梯形，然后使文本居中很容易。我已经在网上寻找了如何做到这一点的方法，但是所有答案都具有相同的方法，只是使顶部或底部边框成为梯形。

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

最佳答案

获取梯形文本的最简单方法涉及clip-path属性。

这样的事情应该适合您的情况：

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

此属性使您可以控制元素背景的形状。

这是您的代码已更新的代码段：

.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>

关于html - 如何使用居中文字创建梯形div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58610317/