javascript - 在下面的选项卡上创建箭头表示
问题描述
我正在尝试在单击每个按钮时创建以下结构,我想在容器顶部的按钮中心显示小三角形表示
但我不知道要做到这一点。这将有助于建议和帮助
.arrow_box {
position: relative;
border:2px solid green;
height:200px;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>
解决方案
在这里,我为你一起砍了一些垃圾。
button {
position: relative;
}
button:focus:before{
border:2px solid green;
height:200px;
width: 300px;
content: "";
position: absolute;
top: 200%;
left: -20%;
border:2px solid green;
}
button:focus:after {
bottom: -100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>
推荐阅读
- python - python新实例不更新变量
- python - 检查 dynamodb 中是否存在主键
- react-native - 蓝牙热敏打印机与 React Native App 集成
- php - 未找到 Laravel Symfony ArrayLoader
- ios - 如何在 WKWebview 中处理图像上传?
- azure-web-app-service - 如何禁用路径的应用服务身份验证?
- csv - 如何使用特定分隔符在 visidata 中打开文件?
- google-cloud-platform - GCP - 切换到服务帐户方法
- java - BoxLayout 的 Java Swing 对齐问题
- angular - 以角度存储可观察的数据列表以进行第一次调用并使用存储的值