html - 如何创建文本居中的梯形 div？

Question

我正在尝试创建一个形状像梯形的 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;
}

Answer 1

获取梯形文本的最简单方法涉及 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>