Нарисуйте блок-схему с пятиугольниками, используя CSS и HTML - PullRequest
Новая
       17

Нарисуйте блок-схему с пятиугольниками, используя CSS и HTML

0 голосов
/ 28 июня 2018

У меня есть следующая схема:

enter image description here

Как я могу использовать css и html, чтобы нарисовать такую ​​вещь? Я попробовал некоторые из способов, но он не может создать границу для треугольника, я хочу, чтобы у треугольников были границы, и я могу установить границу на две стороны или один край или все края этих треугольников. .

Вот код, который я пробовал с первым пятиугольником: 

<style type="text/css">
       div {
  position: relative;
  width: 200px;
  height: 150px;
  background: #4275FF;
}
div:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 75px solid transparent;
  border-bottom: 75px solid transparent;
  border-left: 25px solid #4275FF;
  right: -25px;
}
</style>

   <div></div>

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

Я думаю, что SVG - лучший способ создать границу для треугольника. Смотрите код, «ломаная линия» создать треугольник. три «линии» - это граница треугольника, и вы можете изменить цвет этих линий с помощью стиля-штрих-цвета. 

  <svg>
    <polyline points="10,10  50,50  10,90" style="fill:#006600;stroke:#fff;" />
    <line x1="10" y1="10" x2="50" y2="50" style="stroke:#ff0000;" stroke-width="2" />
    <line x1="50" y1="50" x2="10" y2="90" style="stroke:#00ff00;" stroke-width="2" />
    <line x1="10" y1="10" x2="10" y2="90" style="stroke:#0000ff;" stroke-width="2" />
  </svg>
0 голосов
/ 28 июня 2018

Другая альтернатива 

div {
  position: relative;
  width: 200px;
  height: 150px;
  background: #EEE;
  border: 1px dashed #777;
  position: relative;
}
div.v2 {
  border-right: 0px;
}
div:after {
  content: '';
  z-index: -1;
  transform: rotate(135deg);
  background: inherit;
  border: inherit;
  width: 106px;
  height: 106px;
  top: 21px;
  right: -53px;
  position: absolute;
}
<div></div>
<div class="v2"></div>
...