如何为视口边缘的十字分割线添加指定样式的空心箭头？

现有代码已实现视口居中标题和十字虚线分割效果，需新增以下功能：

• 在十字线四个端点（视口上、右、下、左边缘）添加指向视口边缘的空心箭头，尺寸约3rem（~50px）
• 箭头线条样式与十字线一致：1px solid deeppink
• 实现动态获取并显示视口宽高及比例的功能

完整实现代码 #

HTML结构 #

调整结构，增加四个箭头元素：

<body class="horver">
    <h1 id="viewport-info">width&ratio;height</h1>
    <div class="arrow arrow-top"></div>
    <div class="arrow arrow-right"></div>
    <div class="arrow arrow-bottom"></div>
    <div class="arrow arrow-left"></div>
</body>

CSS样式 #

优化原有样式并添加箭头样式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.horver {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
}

/* 水平十字虚线 */
.horver::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, transparent 49%, deeppink 49%, deeppink 51%, transparent 51%);
}

/* 垂直十字虚线 */
.horver::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 49%, deeppink 49%, deeppink 51%, transparent 51%);
}

h1 {
    font-family: monospace;
    background-color: white;
    border: 1px solid deeppink;
    border-radius: 0.25rem;
    color: midnightblue;
    padding: 0.25em 0.5em;
    z-index: 100;
}

/* 箭头通用样式 */
.arrow {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border: 1px solid deeppink;
    background-color: white;
}

/* 顶部箭头（指向视口上边缘） */
.arrow-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: none;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 右侧箭头（指向视口右边缘） */
.arrow-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-left: none;
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

/* 底部箭头（指向视口下边缘） */
.arrow-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top: none;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

/* 左侧箭头（指向视口左边缘） */
.arrow-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-right: none;
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

JavaScript 动态更新视口信息 #

添加脚本实现实时获取并显示视口宽高及比例：

const viewportInfo = document.getElementById('viewport-info');

function updateViewportInfo() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const ratio = (width / height).toFixed(2);
    viewportInfo.textContent = `${width}px | ${ratio} | ${height}px`;
}

// 页面加载时初始化
updateViewportInfo();
// 窗口大小改变时实时更新
window.addEventListener('resize', updateViewportInfo);

内容的提问来源于stack exchange，提问作者designtools