Html 如何使我的网站剪辑路径形状不影响网站的其余部分？

我开始做一个网站，想做一个独特的形状去后面我的标志和导航栏。为了做到这一点，我在CSS中使用了剪辑路径代码，这对我来说是新的，也是我第一次尝试。但是我无法让它工作，因为如果我使用相对定位，导航栏和页面上的文本之间会有一个很大的间隙，或者如果我使用绝对定位，导航栏和页面上的文本都会被塞满在顶部，并相互层叠。
我想不出怎样才能达到我想要的效果。我把它放在了相对位置上，因为这是我能得到的最接近的位置。任何帮助都将不胜感激

正文{
z指数：1；
显示：块；
最小宽度：44em；
最大宽度：60em；
保证金：0自动；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线Arial，Helvetica，无衬线；
背景色：rgb（76119175）；
}
/*我的徽标代码*/
#标志{
z指数：1；
位置：相对位置；
边缘顶部：20px；
左边距：10px；
}
/*紫色形状代码*/
#紫色的{
z指数：0；
位置：相对位置；
宽度：961px；
高度：80px；
背景尺寸：封面；
背景色：rgba（64,19,85,0.952）；
剪辑路径：多边形（100%0、100%27%、41%28%、0.47%、0.0）；
}
氢{
文本对齐：居中；
}
navbar先生{
z指数：1；
颜色：rgb（119206201）；
文本对齐：左对齐；
填充：0.25em；
左：1米；
浮动：左；
宽度：7em；
顶部：0px；
}
纳瓦尔先生{
保证金：0；
填充：0；
位置：相对位置；
顶部：2米；
}
李国宝先生{
列表样式类型：无；
填充：0.25em；
保证金：0.25em0；
位置：相对位置；
背景色：深黄色；
}
#名字{
文本对齐：居中；
}
.导航a{
文字装饰：无；
}
导航a：链路{
颜色：黑色；
}
导航a：已访问{
颜色：紫色；
}
导航a：悬停{
颜色：白色；
}
导航a：激活{
颜色：蓝色；
}
/*我坚实的灰色背景，让一切都成为现实*/
#坚实的{
z指数：-1；
背景颜色：灰色；
}

家
你好!！我的名字是克里斯蒂·马特恩，我是这个网站的创建者。我想先说声谢谢你浏览我的网站！我自己编写了所有的代码，也为它创造了所有的艺术。在这里，我已经包括了一个关于我的页面
对于任何想雇用我的人，一个联系页面，以防有人需要联系我。这可能是因为网站有问题，关于工作机会，或者因为动物杂交改变了一些东西，需要调整炉。

我还为我的艺术作品集提供了一个页面，我是一名自由艺术家，我的艺术作品可以在那里找到。我还为新动物穿越新地平线游戏中的大鱼和鱼设计了一个卷帘。我不喜欢很多应用程序，维基也不喜欢
伟大的我想把这变成一个完整的应用程序，并在这样做的过程中。目前，虽然它在这里可用，但在应用程序完成后可能会留在这里，也可能不会留在这里。

再次感谢您访问我的网站，我希望您喜欢您所看到的

克里斯蒂·马特恩和霍姆特；印第安纳州韦恩堡和霍姆特；isfsf