如何在椭圆框中为该数组设置样式-CSS

时间:2019-01-06 15:47:48

标签: css css3

我正在使用此演示工作区-Demo

这里有一个数组。

var a = [{"id":"firstName","value":["Sam3","Sam5"]},{"id":"lastName","value":["Jones4","Jones5"]}] 

这是一个基于React的项目。我想将此显示为页面中的样式(而不是数组)。我想像这张图片一样显示。

Image

这是椭圆形,不是任何不规则形状。

还有一个十字按钮和数组。

<div>
<div>id: val0,val1 (and a cross button to remove this filter)</div>
<div>id: val0,val1 (and a cross button to remove this filter)</div> .... so on
</div>

如何以这种椭圆形显示此数组

请回答我的Demo小提琴

Image

名字:Sam2,Sam3将在一个椭圆框中,而名字:Jones3,Jones5将在另一个框中。可能有几十个盒子,我现在正在处理两个盒子。

盒子会像这样

Image

在椭圆框的空白区域中,文本将显示,然后是十字按钮/图标

0 个答案:

没有答案