创建一个倾斜的三角形

Question

是否可以创建由此 Fiddle 生成的形状。但是然后没有 JavaScript 但 CSS3 （有 <div>） ?

基本上是这样的：

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>

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

#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

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

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

Mobilefish.com 有一个在线转换工具 (http://www.mobilefish.com/services/base64/base64.php)。只需粘贴您的 SVG 文件的内容并填写表格，它就会在文本区域中显示结果供您复制。请记住删除它返回给您的数据中的换行符。 ... 到目前为止，您可以在我们讨论过的任何地方使用它（内联除外，因为那没有意义）只需将乱码放在这些示例中显示 [data] 的地方即可。

作为CSS

.标志{ 背景：url(数据:image/svg+xml;base64,[数据]); } “

Answer 3

Note: Posting this answer just because you asked with CSS3, but the complexity and possible calculation overhead involved in this approach is proof enough why CSS shouldn't be used for this. Please do not use this approach.

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

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

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

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

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

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

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

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

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

创建一个倾斜的三角形

Creating a skewed triangle shape

html

css

svg

css-shapes