用 SVG/Canvas/CSS3 创建这些形状？答案

【问题标题】：Create these shapes with SVG/Canvas/CSS3?用 SVG/Canvas/CSS3 创建这些形状？
【发布时间】：2015-02-25 21:54:03
【问题描述】：

我想创建这个：最好使用 SVG、Canvas 或 CSS3。

最终，我打算在这些区域上应用 4 种单独的多重混合模式。

我还想拉伸这个区域以占据网页的整个高度/宽度。

我可以在一定程度上做到这一点here，但这不适合我。这使用：

box-sizing:border-box;
    -mox-box-sizing:border-box;
    border-top:rgba(25,25,255,0.8) solid 50vh; /* Nothing below IE8 or Firefox 19 */
    border-bottom:rgba(25,25,255,0.8) solid 50vh; /* Nothing below IE8 or Firefox 19 */
    border-left: rgba(0,0,255,0.5) solid 50vw;; 
    border-right: rgba(0,0,255,0.5) solid 50vw;;
    -moz-background-clip: content;     /* Firefox 3.6 */
      -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
          background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

有人可以帮忙实现图形中的形状吗？

【问题讨论】：

标签： html css svg css-shapes

【解决方案1】：

编辑：

视频叠加DEMO
图片和文字叠加DEMO

使用相同的技术在 CSS 中创建以下形状

DEMO

HTML：

<div class="out">
    <div class="in"></div>
</div>

CSS：

.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-45deg);
    transform : rotate(-45deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(45deg);
    transform : rotate(45deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}

原答案：

您也可以使用带有transform: rotate(); 的伪元素来创建线条：

DEMO

HTML：

<div></div>

CSS：

div{
    height:75%;
    position:relative;
    overflow:hidden;
}
div:before, div:after{
    content:'';
    position:absolute;
    left:0; top:0;
    width:1px;
    height:150%;
    background:grey;

    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -webkit-transform : rotate(-45deg);
    transform : rotate(-45deg);
}
div:after{
    left:100%;
    -webkit-transform : rotate(45deg);
    transform : rotate(45deg);
}

【讨论】：

很好，但看起来你需要为 div 添加一个宽度才能完成这项工作...updated fiddle（否则线条不会在宽屏幕上相遇）
非常感谢@web-tiki - 如果我要使用视频，而不是图像，我需要进行哪些更改？我在这里试过但没有运气：jsfiddle.net/fcLkW/8
@web-tiki 太棒了！！现在只需要将其纳入我的解决方案:-)

【解决方案2】：

你可以使用lineTo()、beginPath()、moveTo()等方法在html 5中画线。

下面是一个例子。请看一下。

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="CanvasDraw" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('CanvasDraw');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(450, 50);
      context.stroke();
    </script>
  </body>
</html>

我希望这个例子能帮助你理解如何画线。

【讨论】：

谢谢。那么如果我想绘制一个区域来占据页面的全宽和 75% 的高度，这很容易实现吗？
是的，这也很简单。您可以在其中进行一些更改。如果您得到了答案，请将答案标记为已接受。
谢谢@gargAman - 你有使用 Canvas 绘制区域的示例吗？
是的，我又添加了一个例子。请看一下。

【解决方案3】：

如您所愿，再举一个例子。这里再举一个例子。

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="CanvasDraw" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('CanvasDraw');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.rect(188, 50, 200, 100);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

希望对你也有帮助。

【讨论】：

非常感谢 - 我非常感谢！最终，我希望创建这样的东西：i.stack.imgur.com/caCdF.jpg - 是否可以拉伸 100% 的页面宽度？
欢迎您。如果您认为它对您有帮助，请投票。并标记为“已接受”（绿色标记）。
@web-tiki 非常接近 :-) 是否可以将区域高度拉伸到 100%？
哇，非常接近先生@web-tiki！在每个形状上应用混合模式是否容易？
@web-tiki 只是想知道是否可以像这样使用css-tricks.com/basics-css-blend-modes，或者我是否必须只使用 rgba alpha/transparency 技术。

【解决方案4】：

您可以使用画布做到这一点。你的 HTML 中需要这个：

<canvas id="canvas"></canvas>

在 javascript 中，您需要获取此元素及其上下文才能在其上绘图。像这样的：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

您希望这是 100% 的宽度和高度，因此您设置画布的宽度和高度以适合您的屏幕。像这样的：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

你会看到周围有一个白边，有一个 CSS 技巧可以删除它：

html, body, canvas {
    padding:0;
    margin:0
}

你现在只需要在上面画画。例如：填充背景：

ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle="red";
ctx.fill();

看到这个jsfiddle

--- 编辑

唯一缺少的部分是在彼此之上绘制 2 个三角形。您可以使用这些函数（beginPath、moveTo、lineTo 和 fill）绘制三角形。

请参阅此更新的jsfiddle，以获取顶部有三角形的示例。

请参阅此documentation，以帮助您了解如何在画布上绘制形状。

【讨论】：