如何建立会员比较概述？

Question

我有一个不寻常的问题，但我被困住了，并认为这里有人可能知道。我基本上想要创建一个包含的成员资格概述/比较，并且想知道如何最有效/最好地构建它，特别是以红色突出显示的部分。

你会用CSS解决它并构建每个单独的元素吗？或者你宁愿在photoshop中做这件事并通过代码包括这样的图片，例如作为背景图片？

鉴于它仍然与代码相关（即用CSS构建它是否可能/有效），我希望这个问题是有效的，有人可以对此有所了解！ （我根本不希望任何代码解决方案，只是想了解CSS / SVG编码是否是最有效的方式）。

非常感谢您的帮助!!

Answer 1

您可以创建一个SVG元素，只需在三个不同的列中重复使用它，更改填充（橙色/灰色/蓝色）。

Answer 2

你能做的最好的事情就是使用bootstrap来达到这个目的：

<div class="container">
<div class="col-sm-3">
  <!-- Column one, detail list -->
</div>
<div class="col-sm-3">
  <!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
  <!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
  <!-- Column four, third membership option -->
</div>
</div>

您将获得响应良好的行为设计：

https://jsfiddle.net/zzhs5w6n/2/

您标记为红色的部分仅为图像。 你可以找一些免费的谷歌搜索，或者你可以设计自己使用photoshop，illustrator，甚至gimp或微软涂料，如果你想。 然后，在该示例中，您必须添加对此图像的响应，检查下一个完整的小提琴：

https://jsfiddle.net/zzhs5w6n/10/

然后，您可以添加更多bootstrap css或主css，以使其适应您想要/需要的任何内容。

希望有所帮助