css - 如何创建此逐步形状以展示流程

Question

我到处都试过谷歌搜索，但找不到插件或任何 css 教程来制作这个盒子形状的部分来说明流程？

我的客户坚持要它的形状。

请看附图。 this is the screenshot of the section i want to make

该部分在本网站中http://www.oaktreeclinicmidlands.co.uk/

Answer 1

通过结合使用 display: flex; 和 SVG，您可以获得可缩放到任何视口(viewport)的响应式设计，而无需引用外部图像。

此代码段使用了两个彼此重叠的 flexbox，一个包含 SVG 元素，一个包含副本。前两个 SVG 元素的背景颜色与后续元素的 fill 属性相匹配，以实现可缩放的间距，而不会使 CSS 过于复杂。

编码愉快!

* {
  box-sizing: border-box;
}

.arrow-container {
  display: flex;
  width: 100%;
  min-width: 1000px;
  padding: 100px;
  background-color: #26353D;
}

.arrow-item {
  flex: 1;
  height: 100%;
}

.arrow-1 {
  fill: #F29720;
  background-color: #99BB64;
}

.arrow-2 {
  fill: #99BB64;
  background-color: #5EA02B;
}

.arrow-3 {
  fill: #5EA02B;
}

.text-container {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  width: 100%;
  min-width: 1000px;
  padding: 100px;
}

.text-item {
  flex: 1;
  padding: 40px;
}

<div class="arrow-container">
  <svg class="arrow-item arrow-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 724 668"><polygon points="668 668 0 668 0 0 668 0 724 334 668 668"/></svg>
  <svg class="arrow-item arrow-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 724 668"><polygon points="668 668 0 668 0 0 668 0 724 334 668 668"/></svg>
  <svg class="arrow-item arrow-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 724 668"><polygon points="668 668 0 668 0 0 668 0 724 334 668 668"/></svg>
</div>

<div class="text-container">
  <div class="text-item">
    <h2>Consultation</h2>
    <p>Contact us if you are struggling with any mental or emotional health issues, We will arrange.</p>
  </div>
  <div class="text-item">
    <h2>Treatment</h2>
    <p>Treatment starts with assessment of your issues with comprehensive care planning. Care plan could.</p>
  </div>
  <div class="text-item">
    <h2>Support</h2>
    <p>Recovery- With a friendly and approachable team of clinicians and administrative staff.</p>
  </div>
</div>