只是想知道如何制作一个具有更多顶点的 div，如下图所示:
有没有办法用 css 或 JavaScript 做到这一点？ 我想要做的是在这个橙色形状内添加一个文本，这样左上角区域的图像就不会覆盖文本。
最佳答案
你可以伪造它。我不确定需要多少图像，但我使用 mask <div> 重新创建了它具有绝对定位，以使边框看起来像您拥有的那样。这实际上是一个嵌套的 div，其底部和右侧边框重叠(在顶部和左侧)一个设置了所有四个边框的 div。
你可以看到 JSFiddle here
回答你的问题
不，你不能制作多边形 div但如果你愿意，你可以伪造一个。
HTML
<body>
<div id="container">
<div id="mask">
Image here
</div>
<div id="image">
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
CSS
#mask{
position: absolute;
width: 200px;
height: 200px;
top: 8px;
left: 8px;
background-color: white;
border-right: 5px solid black;
border-bottom: 5px solid black;
z-index: 1;
}
#container{
z-index: -1;
background-color: orange;
width: 500px;
height: 500px;
overflow: hidden;
border: 5px solid black;
}
#image{
width: 200px;
height: 200px;
float: left;
}
关于javascript - 在一个div中制作超过4个顶点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25965796/