如何在CSS中绘制一个带有矩形的居中线到一侧

Question

在造型方面，我是个新手。

我有一个网络应用程序（使用GWT构建），我在其中显示结果网格，在一列中，我想显示分数的可视化，其中有一条中心黑线，并且右边是一个绿色矩形表示正分数，左边是红色矩形表示负分数。矩形的大小表示分数的值。像这样的东西：

我有整个细胞的div;我想我需要做的是添加两个子div，以某种方式绘制中心线，然后将矩形添加到适当的div。我对如何做到这一点感到有点困惑。

我有这个：

 @Override
        public SafeHtml getValue(SearchResult value) {
            SafeHtmlBuilder sb = new SafeHtmlBuilder();

            float ratio = value.getRatio();

            sb.appendHtmlConstant("<div style='width: 100%; height: 100%; position: relative;'>");

            if (ratio > 0) { 
                sb.appendHtmlConstant("<div style='position: absolute; left: 0; top: 0; width: 100%; z-index: 1'><div style='display: inline; float: left; width: "
                        + ratio
                    + "%; height: 20px; background-color: #82cd80;'></div>");
            }
            else {
            sb.appendHtmlConstant("<div style='display: inline; float: right; width: "
                    + ratio
                    + "%; height: 20px; background-color: #c54c4d;'></div>");
            }
            sb.appendHtmlConstant("</div>");
            sb.appendHtmlConstant("</div>");
            return sb.toSafeHtml();
        }

但它并没有任何吸引力。我很困惑。

Answer 1

每个图表应该有两个div。一个围绕着整个图形（就像一个封面），而另一个绕着条形图围绕着它。封面是你如何获得你的线。在它上面设置一个边框，它应该如下所示：

border-right: 2px solid color;

（对于另一张图，只做左边的边框）
现在我不确定你使用的是什么，因为我从来没有使用过“SafeHtml”，但它看起来像是在使用基本的HTML功能，所以只要你知道放在哪里就应该没问题。