Create these shapes with SVG/Canvas/CSS3?

Question

I'd like to create this: these 4 shapes preferrably with SVG, Canvas or CSS3.

Ultimately, I intend to apply 4 separate multiply blend modes on the areas.

I'd also like to stretch this area to take up the full height/width of the web page.

I am able to do this to an extent here but it's not right for me. This uses:

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 */

Can someone assist in achieving the shape in the graphic?

web-tiki · Accepted Answer · 2014-07-01 16:08:38Z

1

EDITS:

Video overlay DEMO
Image and text overlay DEMO

Creating the following shape in CSS with the same technique

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

Original answer :

You could also use pseudo elements with transform: rotate(); to create the lines :

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

edited Jul 1, 2014 at 16:08

answered Jul 1, 2014 at 11:38

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Danield Over a year ago

Nice, but it looks like you'll need to add a width to the div to make this work... updated fiddle (because otherwise the lines don't meet on a wide screen)

michaelmcgurk Over a year ago

Many thanks @web-tiki - instead of an image, if I were to use a video, what changes would I need to make? I tried it here but no luck : jsfiddle.net/fcLkW/8

michaelmcgurk Over a year ago

@web-tiki fantastic!! just need to work this into my solution now :-)

gargAman · Accepted Answer · 2014-07-01 10:29:27Z

1

you can use lineTo(), beginPath(), moveTo() etc methods to draw the line in html 5.

Here is one example given below.Please have a look.

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

I hope this example will help you to understand that how to draw line.

answered Jul 1, 2014 at 10:29

gargAman

1211 silver badge5 bronze badges

4 Comments

michaelmcgurk Over a year ago

Thanks for this. So if I wanted to draw an area to take full width of the page and 75% height, is this easy to achieve?

gargAman Over a year ago

Yes it is also easy.You can do some changes in it. And if you got your answer then please mark the answer as Accepted.

michaelmcgurk Over a year ago

Thank you @gargAman - do you have examples of drawing areas with Canvas?

gargAman Over a year ago

Yes, I have add one more example.Please have a look.

gargAman · Accepted Answer · 2014-07-01 12:00:34Z

1

As you want the further example.Here is one more example for you.

<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 hope it will also helpful to you.

answered Jul 1, 2014 at 12:00

gargAman

1211 silver badge5 bronze badges

6 Comments

michaelmcgurk Over a year ago

Many thanks for this - I very much appreciate it!! Ultimately, I'm looking to create something like this: i.sstatic.net/caCdF.jpg - and is it possible to stretch this 100% width of the page?

gargAman Over a year ago

Your welcome.And if you think it is helpful to you then please vote it up.And also mark as 'Accepted'(green mark).

michaelmcgurk Over a year ago

@web-tiki That is very close :-) Is it possible to stretch the area height to 100%?

michaelmcgurk Over a year ago

Wow, very nearly there sir @web-tiki!!! Is it easy to apply blend mode on each shape?

michaelmcgurk Over a year ago

@web-tiki just wondering if it's possible to use like this css-tricks.com/basics-css-blend-modes or if I have to just use rgba alpha/transparency techniques.

|

service-paradis · Accepted Answer · 2014-07-01 14:04:37Z

You can do this using canvas. You need this in your HTML:

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

In javascript, you will need to get this element and its context to be able to draw on it. Something like this:

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

You want this to be 100% width and height, so you set your canvas width and height to fit your screen. Something like this:

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

You will see a white margin around, there is a CSS trick to remove it:

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

You only need to draw on it now. Ex.: fill the background:

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

See this jsfiddle

--- EDIT

The only part that is missing is to draw 2 triangle on top of each other. You can draw a triangle using those functions (beginPath, moveTo, lineTo and fill).

See this updated jsfiddle for an example with a triangle at top.

See this documentation to help you understand how you draw shapes on canvas.

Collectives™ on Stack Overflow

Create these shapes with SVG/Canvas/CSS3?

4 Answers 4

Original answer :

3 Comments

4 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Original answer :

3 Comments

4 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related