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

Question

我想在 html 中绘制类似这样的东西。我可以在 html 中标记矩形吗？我想可能是通过使用 <hr> ？

此刻我刚刚画了一个矩形

这是代码

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

我怎样才能在它周围画线然后标记它

Answer 1

您可以使用 伪元素 和 data 属性 仅使用 2 个元素来构造线条和标签

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;
}