Создать эти фигуры с помощью SVG/Canvas/CSS3?

Я бы хотел создать это: эти 4 формыжелательно с SVG, Canvas или CSS3.

В конечном счете, я намерен применить к областям 4 отдельных режима множественного наложения.

Я также хотел бы растянуть эту область, чтобы она занимала всю высоту/ширину веб-страницы.

Я могу сделать это здесь, но мне это не подходит. Это использует:

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

Может ли кто-нибудь помочь в достижении формы на графике?


svg html css css-shapes
person michaelmcgurk    schedule 01.07.2014    source источник

Ответы (4)


arrow_upward
1
arrow_downward

РЕДАКТИРОВАНИЕ:

  1. Наложение видео DEMO
  2. Наложение изображения и текста DEMO

Создание следующей формы в CSS с той же техникой

ДЕМО

Форма CSS

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(); для создания строк:

ДЕМО

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);
}
person web-tiki    schedule 01.07.2014
comment
Хорошо, но похоже, что вам нужно добавить ширину в div, чтобы это заработало... обновил скрипт (иначе строки не сходятся на широком экране) - person Danield; 01.07.2014
comment
Большое спасибо @web-tiki - если бы я использовал видео вместо изображения, какие изменения мне нужно было бы внести? Я попробовал это здесь, но безуспешно: jsfiddle.net/fcLkW/8 - person michaelmcgurk; 01.07.2014
comment
@веб-тики фантастически!! просто нужно включить это в мое решение сейчас :-) - person michaelmcgurk; 01.07.2014

arrow_upward
1
arrow_downward

вы можете использовать методы 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>

Я надеюсь, что этот пример поможет вам понять, как рисовать линии.

person gargAman    schedule 01.07.2014
comment
Спасибо за это. Итак, если я хочу нарисовать область, занимающую всю ширину страницы и 75% высоты, легко ли этого добиться? - person michaelmcgurk; 01.07.2014
comment
Да, это также легко. Вы можете внести в него некоторые изменения. И если вы получили свой ответ, пожалуйста, отметьте ответ как принятый. - person gargAman; 01.07.2014
comment
Спасибо @gargAman - у вас есть примеры областей рисования с помощью Canvas? - person michaelmcgurk; 01.07.2014
comment
Да, я добавил еще один пример. Пожалуйста, посмотрите. - person gargAman; 01.07.2014

arrow_upward
1
arrow_downward

Как хотите дальнейший пример. Вот еще один пример для вас.

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

Я надеюсь, что это также будет полезно для вас.

person gargAman    schedule 01.07.2014
comment
Большое спасибо за это - я очень ценю это!! В конечном итоге я хочу создать что-то вроде этого: i.stack.imgur.com/caCdF. jpg - и можно ли растянуть эту 100% ширину страницы? - person michaelmcgurk; 01.07.2014
comment
Добро пожаловать. И если вы считаете, что это полезно для вас, пожалуйста, проголосуйте за это. А также пометьте как «Принято» (зеленая отметка). - person gargAman; 01.07.2014
comment
@web-tiki Это очень близко :-) Можно ли растянуть высоту области до 100%? - person michaelmcgurk; 01.07.2014
comment
Вау, почти готово, сэр @web-tiki!!! Легко ли применить режим наложения к каждой фигуре? - person michaelmcgurk; 01.07.2014
comment
@web-tiki просто интересно, можно ли использовать вот так css-tricks.com/ basics-css-blend-modes или если мне нужно просто использовать методы rgba alpha/transparency. - person michaelmcgurk; 01.07.2014
comment
Вот это да!!!!!! именно так :-D последний вопрос, легко ли добавить текст поверх всего этого, да? огромное вам спасибо за вашу помощь. - person michaelmcgurk; 01.07.2014

arrow_upward
0
arrow_downward

Вы можете сделать это с помощью холста. Вам нужно это в вашем 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 пример с треугольником вверху.

Ознакомьтесь с этой документацией, чтобы понять, как вы рисовать фигуры на холсте.

person service-paradis    schedule 01.07.2014