Question

是否可以创建由此Fiddle生成的形状。但是除了CSS3（<div>）之外没有JavaScript？

基本上这个：

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();
    }
}

所以你有点需要相互连接？

Answer 1

如果您不想使用svg，请使用canvas。

<svg width="100" height="100">
  <path d="M0 0 l100 10 l-40 90z" fill="none" stroke="black" stroke-width="2" />
</svg>

8,8,10,10,30,30,49,10的路径命令为M8 8 L10 10 L30 40 L49 10z。

<svg width="49" height="40" viewBox="0 0 50 41">
  <path d="M8 8 L10 10 L30 40 L49 10z" fill="none" stroke="black" stroke-width="2" />
</svg>

要将点击事件应用于形状，您可以在pointer-events: all上使用#test。

#test {
  pointer-events: all;
}

<svg width="49" height="40" viewBox="0 0 50 41">
  <path id="test" d="M8 8 L10 10 L30 40 L49 10z" fill="none" onclick="alert('Works')" stroke="black" stroke-width="2" />
</svg>

Answer 2

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

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

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

＆＃13;

document.getElementById("clickme").onclick = function() {
  alert('Hi! I work alright.');
}

＆＃13;

div {
  position: relative;
  height: 50px;
  width: 45px;
  border: 1px solid black;
  border-left: none;
  border-bottom: none;
  -webkit-transform: skew(-10deg) rotate(5deg);
  -moz-transform: skew(-10deg) rotate(5deg);
  transform: skew(-10deg) rotate(5deg);
  overflow: hidden;
}
a {
  display: block;
  content: '';
  margin-left: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 100%;
  width: 100%;
}
div:after {
  position: absolute;
  top: 0px;
  left: 0px;
  content: '';
  height: 50px;
  width: 45px;
  -webkit-transform: skew(42deg);
  -webkit-transform-origin: left bottom;
  -moz-transform: skew(42deg);
  -moz-transform-origin: left bottom;
  transform: skew(42deg);
  transform-origin: left bottom;
  border-right: 1px solid black;
}

＆＃13;

<div><a href="#" id="clickme"></a>
</div>

＆＃13;

创建倾斜三角形形状的另一个选择是使用clip-path，如下面的代码段所示。通过在主容器元素上应用相同的clip-path和小于容器的伪元素来创建形状。

＆＃13;

document.getElementById("clickme").onclick = function() {
  alert('Hi! I work alright.');
}

＆＃13;

div {
  position: relative;
  height: 150px;
  width: 150px;
  background: black;
  -webkit-clip-path: polygon(0% 0%, 100% 20%, 70% 100%);
}
div:after{
  position: absolute;
  content: '';
  height: calc(100% - 5px);
  width: calc(100% - 5px);
  top: 2px;
  left: 3px;
  background: white;
  -webkit-clip-path: polygon(0% 0%, 100% 20%, 70% 100%);
}

/* Just for demo */

div{
  transition: all 1s;
}
div:hover{
  height: 250px;
  width: 250px;
}

＆＃13;

<div id="clickme"></div>

＆＃13;

Answer 3

您可以通过将SVG作为CSS嵌入来实现。引用自： http://css-tricks.com/using-svg/

＆＃34;使用SVG的另一种方法是将它们转换为数据URI。数据URI可能无法保存您的实际文件大小，但可以更高效，因为数据就在那里。它不需要额外的HTTPRequest。

Mobilefish.com有一个在线转换工具（http://www.mobilefish.com/services/base64/base64.php）。只需粘贴SVG文件的内容并填写表格，它就会在textarea中显示结果供您复制。请记住删除它返回的数据中的换行符。 ... 你可以在我们到目前为止所谈论的任何地方使用它（除了内联，因为它没有意义）在这些例子中只是把它说成[数据]的胡言乱语。

作为CSS

.logo { background：url（data：image / svg + xml; base64，[data]）; } ＆＃34;

创建倾斜的三角形

3 个答案: