绘制矩形并通过在html中拖动线条来标记它

Question

我想在html.is中绘制这样的东西，可以在HTML中标记矩形吗？我想可以使用<hr>？

此刻我刚画了一个矩形

这是代码

<div style="width:150px;height:80px;border:1px solid #000;">This is a rectangle!</div>

我如何在它周围画线然后标记它

Answer 1

您只需使用2个元素即可使用pseudo elements和data attributes构建线条和标签

<强> FIDDLE

标记：

<div data-label1="a" data-label2="b">
    <span data-label3="c">XYZ Pty Ltd</span>
</div>

CSS

div
{
    width:150px;
    height:80px;
    border:1px solid #000; 
    font-size: 25px;
    text-align:center;
    margin: 100px;
    position: relative;
    background: #fff;
}
span
{
  padding: 10px 20px;    
  display: inline-block;
}
div:before, div:after
{
    content: attr(data-label1);
    position:absolute;
    left: -50px;
    top: 40px;
    width: 50px;
    height: 1px;
    z-index: -1;
    background: #000;
    text-align:left;
    font-size: 18px;  
}
div:after
{
    content: attr(data-label2);
    right:-50px;
    left: auto;
    text-align: right;
}
span:after
{
    content: attr(data-label3);
    position:absolute;
    left:0;right:0;
    margin: auto;
    padding-top:100px;
    top:20px;
    font-size: 18px;
    width: 1px;
    height: 0;
    z-index: -1;
    background: #000;
}

Answer 2

此代码将为您提供所需的输出，但这是一种硬编码。

<div style="display:inline-block; position:relative;top:20px;">a</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;"></div>
<div style="width:150px;height:80px;border:1px solid #000;display:inline-block;position:relative;left:-5px;">This is a rectangle!</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;left:-10px;"></div>
<div style="display:inline-block; position:relative;top:20px;">b</div>
<div class="vLine"style="height:40px;width:1px;background:#000;position:relative;left:230px;"></div>
<div style="position:relative;left:230px;">c</div>

Answer 3

对于线段，请勿使用

<hr>

因为它的宽度取决于父容器的宽度。因此，为了设置其宽度，您需要引入一个div来限制其宽度。所以不要创建两个元素。通过保持其高度来创建只有div的行：0px和width：所需的宽度。你有你的水平线段。如果你想要一条垂直线，那么保持宽度为零和高度为所需的数量。

希望这可以帮助你。

Answer 4

你可以使用普通的HTML和CSS或使用HTML5 Canvas，我给你的是html和css

http://jsbin.com/IlArOTE/1/edit