1

Пример фигуры

НАДО сверстать оранжевую фигуру, белую фигуру делать не надо, только оранжевую фигуру подскажите, как сделать?

4
  • Вот тут посмотрите: habr.com/post/126207
    – Lukas
    29 окт 2018 в 7:59
  • С хвостом надо или без?
    – Qwertiy
    29 окт 2018 в 8:27
  • Qwertiy неттттттт
    – user312259
    29 окт 2018 в 8:34
  • Qwertiy без хвоста
    – user312259
    29 окт 2018 в 9:03

2 ответа 2

2

По размерам сами можете под себя отредактировать.

function draw(){
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(100,0);
  ctx.lineTo(300,0);
  ctx.lineTo(400,200);
  ctx.lineTo(300,400);
  ctx.lineTo(100,400);
  ctx.lineTo(0,200);
  ctx.fillStyle = 'orange';
  ctx.fill();
}
draw();
<canvas id="canvas" width="400" height="400"></canvas>

1
  • спасибо большое, к сожалению могу поставить только 1 лайк, css мне лучше, чем canvas
    – user312259
    29 окт 2018 в 10:35
1

Так пойдёт? Я заливаю серебряным и белым углы, а оставшийся центр делаю оранжевым.

header, footer {
  height: 5em;
}

header {
  background: silver;
}

div {
  width: 10em;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  
  --d: 16.5%; /* не знаю, как посчитать, подогнал */
  background:
    linear-gradient(120deg, silver var(--d), transparent var(--d), transparent calc(100% - var(--d)), white calc(100% - var(--d))),
    linear-gradient(2400deg, silver var(--d), transparent var(--d), transparent calc(100% - var(--d)), white calc(100% - var(--d))),
    orange;

  /* избавляемся от артефактов сверху и снузу */
  border: 1px solid transparent;
  background-clip: content-box;
}

div:before {
  content: "";
  display: block;
  padding-top: 86.6%; /* sqrt(3)/2 */
}
<header>header</header>
<div></div>
<footer>footer</footer>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.