css 带百分比单位的梯形窗体

xuo3flqw 于 2023-01-06 发布在其他

关注(0)|答案(1)|浏览(130)

在我的Next.js应用程序（基本上是React）中，我试图用样式化组件和边框绘制一个梯形。
我的代码是这样的：

const StyledContainer = styled.div`
position: relative;
border-right: 75px solid red;
border-top: 25px solid transparent;
height: 50%;
width: 75%;
display: flex;
`

然而，就我的目的而言，我需要border-right和border-top属性来使用百分比，但是当我在border-right中插入75%而不是75px时，梯形就不再可见了。
我已经试了一整天来解决这个问题，但我没有做到。有人知道我需要做什么吗？🙏
对于上下文，父容器同时具有width和height属性：

const SAGraph = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
background-color: hotpink;
`;

我见过类似的问题，这些问题都是通过使用vw作为单位来解决的，但这对我的情况没有帮助，因为我需要使用百分比，以确保梯形不会移动到容器之外，并且它使用容器的整个宽度...
编辑：这是我想要的输出图片：

css

来源：https://stackoverflow.com/questions/75009016/trapezoid-form-with-percentage-units

1条答案

按热度按时间

jdgnovmf1#

如果红色部分只是为了装饰，可以将其作为伪after元素添加到父元素中，将其着色为红色，并使用CSS剪切路径和百分比坐标将其剪切为所需的形状。

* {
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.SAGraph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background-color: hotpink;
  position: relative;
}

.SAGraph::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: red;
  bottom: 0;
  left: 0;
  clip-path: polygon(0 100%, 0 60%, 60% 50%, 60% 100%);
}

<div class="SAGraph"></div>

如果你想让红色的部分成为一个实际的子元素，那么直接在子元素上使用相同的技术（而不是在伪元素上）。

赞(0）回复(0）举报 2023-01-06

我来回答

css 带百分比单位的梯形窗体

1条答案

相关问题

热门标签

最新问答