gpt4 book ai didi

html - 使用 CSS 以小 Angular 倾斜 Div 的左侧和右侧

转载 作者:行者123 更新时间:2023-12-02 16:27:33 25 4
gpt4 key购买 nike

<分区>

这是我要创建的内容:

enter image description here

我应该可以使用 clip-path: polygon 来完成,但我不理解 documentation .

这个形状的确切属性是什么?

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - 上、左、下、右? 50%是多少?什么是0?他们代表什么?文档似乎没有说明,除非我遗漏了它。

我从另一篇文章中找到了一些代码,结果如下:

.inner-container-top {
width: 130px;
font-size: 12px;
font-weight: 600px;
background: #8b000a;
color: #ffffff;
padding: 7px;
clip-path: polygon(0% 100%, 100% 100%, calc(100% - 30px) 0%, 0% 0%, calc(100% - 30px) 0%, 0% 0%);
}
<div class="inner-container-top">HELLOWORLD</div>

但我还是不明白为什么它这样做。我需要翻转它,使其向相反的方向倾斜,并在左侧创建一个倾斜。如果可以,请帮忙。

25 4 0
文章推荐: angular - 错误 :Property 'map' does not exist on type 'Observable