使用CSS和HTML用五边形绘制框图

Question

我的示意图如下：

我如何使用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>

Answer 1

另一种选择

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>

Answer 2

我认为SVG是创建三角形边框的最佳方法。 参见代码，“折线”创建一个三角形。三个“线”是三角形的边界，您可以通过style-stroke-color更改这些线的颜色。

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