前端实现且或筛选条件（那些复杂的css）

前言

需求是这样的，如下图，要实现这样一个筛选条件的组件，条件可以动态增加，点击且字可以变成或，再次点击又变回去且！

思路

这个组件难点在于且字后面连接选项框的线条如何动态添加，思路是先把线条以中间为界分为两个部分，为两个div，一个topLine，一个bottomLine如下图：

然后，再把上方的topLine分为三个部分，动态增加的时候，第二个div增加高度，第一个和第三个div不变就好了，如下图：

总结

难道是不难，就是麻烦点，加油！