Html 创建斜三角形形状

是否有可能创建由此生成的形状。但是没有JavaScript，只有CSS3（使用

）

基本上：

for(var i = 0; i < coords.length; i += 1) {
    if(coords[(i + 1)] != undefined) {
        ctx.beginPath();
        ctx.moveTo(coords[i].x, coords[i].y);
        ctx.lineTo(coords[(i + 1)].x, coords[(i + 1)].y);
        ctx.stroke();
    } else {
        ctx.beginPath();
        ctx.moveTo(coords[i].x, coords[i].y);
        ctx.lineTo(coords[0].x, coords[0].y);
        ctx.stroke();
    }
}

for（变量i=0；i

---

因此，您有需要相互连接的点吗？

如果不想使用

画布，请使用
svg


您可以通过将SVG嵌入为CSS来实现。引自：

“使用SVG的另一种方法是将它们转换为数据URI。数据URI可能不会为您节省实际的文件大小，但会更有效，因为数据就在那里。它不需要额外的HTTPRequest

Mobilefish.com有一个在线转换工具（）。只需粘贴SVG文件的内容并填写表单，它就会在文本区域中显示结果供您复制。记住在返回的数据中删除换行符。
...
到目前为止，您可以在我们讨论过的任何地方使用它（内联除外，因为这根本没有意义），只需在这些示例中显示[数据]的地方放上胡言乱语即可

作为CSS

.标志{
背景：url（数据：image/svg+xml；base64[data]）；
}
"

注意：发布此答案仅仅是因为您使用CSS3提问，但此方法所涉及的复杂性和可能的计算开销足以证明为什么不应使用CSS。请不要使用这种方法

关于如何实现这一点的一些解释：

创建带有顶部和右侧边框（1px黑色）的
div
，其他两个边框设置为无
然后将该
div
倾斜一点，使其看起来好像右侧的边缘有点倾斜
在形状内部，将创建一个仅具有右边框的伪元素，并将其倾斜以生成从右下到左上的对角线。变换原点设置为右下角，以避免定位开销
将在父
div
中添加锚定标记，并将溢出设置为隐藏，以便仅可单击形状中的部分
锚定标记上的用户选择被禁用，以防止双击在
div
中选择空白
最后，将整个容器
div
旋转一点，使其看起来好像三角形不平行于x轴

document.getElementById（“clickme”）.onclick=function（）{
警惕（‘嗨！我工作很好’）；
}
div{
位置：相对位置；
高度：50px；
宽度：45px；
边框：1px纯黑；
左边界：无；
边框底部：无；
-webkit变换：倾斜（-10度）旋转（5度）；
-moz变换：倾斜（-10度）旋转（5度）；
变换：倾斜（-10度）旋转（5度）；
溢出：隐藏；
}
a{
显示：块；
内容：''；
左边距：0px；
-webkit用户选择：无；
-moz用户选择：无；
用户选择：无；
身高：100%；
宽度：100%；
}
部门：之后{
位置：绝对位置；
顶部：0px；
左：0px；
内容：''；
高度：50px；
宽度：45px；
-webkit变换：倾斜（42度）；
-webkit变换原点：左下角；
-moz变换：倾斜（42度）；
-moz变换原点：左下角；
变换：倾斜（42度）；
变换原点：左下角；
右边框：1px纯黑；
}

这还不是很清楚。连接应该由哪些DOM元素组成？潜水艇？SVG元素？如果不是在JS中，您将如何定义点？在CSS中？当然。。在photoshop中创建图像。用作…的背景element@NaeemShaikh不，那不是我想要的@DazDylz请为您的问题添加更多上下文。现在似乎不清楚你想做什么。做形状？连接点？开关点以及如何定义它们？那么，我如何将其转换：
8,8,10,10,30,30,49,10
为
M0 l100 10 l-40,90z
？对于javascript，这似乎并没有回答：“没有javascript，只有CSS3（还有“谢谢，但是当你点击形状时，你是否也有可能得到警报？”@DazDylz-当然是。由于形状的
填充
是
无
，你必须给
svg
标记提供id
#test
，或者使用一个组（
g
tag）如果您想添加更多形状，并且每个形状都有不同的警报。-->对于所有阅读此线程的人（只是重复我的观点），此答案对于此问题和此类形状是最好的答案。