前端横折线框怎么实现

图片说明
大约就是这样

使用hr标签实现了一下，使用Vue实现的，当然如果想换成jquery也很简单，只需要把我代码中的@click事件用jquery替换一下就可以了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        hr {
            border: none;
            border-top: 3px solid black;
        }

        #xie,
        #heng {
            float: right;
        }

        #graph {
            float: left;
        }
    </style>
</head>

<body>
    <div id="graph">
        length: <input type="text" v-model="len"> px<br>
        degree: <input type="text" v-model="degree"><br>
        <input type="button" value="绘制" @click="setVal"><br>
        <hr id="xie" :style="xieStyle">
        <hr id="heng" :style="hengStyle">
        <input type="text">
    </div>

    <script>
        var vm = new Vue({
            el: "#graph",
            data: {
                degree: "",
                len: "",
                xieStyle: {
                    "width": "",
                    "transform": ""
                },
                hengStyle: {
                    "width": ""
                }
            },
            methods: {
                setVal() {
                    this.xieStyle["width"] = this.len + "px";
                    this.hengStyle["width"] = this.len + "px";

                    var offsetH = this.len / 2 * Math.sin(this.degree / 180 * Math.PI);
                    var offsetW = this.len / 2 - this.len / 2 * Math.cos(this.degree / 180 * Math.PI);
                    this.xieStyle["transform"] = "translate(" + -(offsetW + 1) + "px, " + offsetH + "px) rotate(" + this.degree + "deg)";
                }
            }
        })
    </script>
</body>

</html>

复制就能运行了，看看能看懂吗，看不懂也可以给你写个jquery版本的
点击绘制，就能根据选的参数绘制了，如图：
图片说明
改改样式就能很好看了