Question

我尝试了google搜索，但找不到插件或任何css教程来制作这个盒形部分来说明流程？

我的客户坚持让它成为那种形状。

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

该部分位于此网站http://www.oaktreeclinicmidlands.co.uk/

Answer 1

通过组合display: flex;和SVG，您可以获得一个响应式设计，可以扩展到任何视口，而无需引用外部图像。

此代码段使用两个彼此叠加的Flexbox，一个带有SVG元素，另一个带有副本。前两个SVG元素的背景颜色与后续元素的fill属性匹配，以实现可伸缩的间距，而不会使CSS过于复杂。

快乐的编码！

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

如何创建此分步形状以显示流程

1 个答案: