使用 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 是创建三角形边框的最佳方式。看代码，'polyline' 创建一个三角形。三个'line'是三角形的边框，可以通过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>

使用 css 和 html 用五边形绘制框图

Draw block diagram with pentagons using css and html

html

css

flowchart