Question

我想创建这个： these 4 shapes 最好使用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 */

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

Answer 1

你可以使用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>

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

Answer 2

编辑：

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

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

<强> DEMO

CSS shape

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

Answer 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>

我希望它对你也有帮助。

Answer 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，以帮助您了解如何在画布上绘制形状。

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

4 个答案:

原始答案：