样式设置
50%
12px
400px
160px
6px
2px
实时预览
预览区域
将 <div class="arrow-box">...</div>
放置在页面中使用
CSS 代码
.arrow-box {
position: relative;
width:400px;
height: 160px;
background: #f0f9ff;
border: 2px solid #bdc3c6;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-box::after, .arrow-box::before {
position: absolute;
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
pointer-events: none;
}
.arrow-box::after {
border-color: transparent;
border-top-color: #f0f9ff;
border-width: 12px;
margin-left: -12px;
}
.arrow-box::before {
border-color: transparent;
border-top-color: #bdc3c6;
border-width: 15px;
margin-left: -15px;
}
工具介绍
样式设置说明
本工具提供了多种样式选项，以生成独一无二的三角箭头。每个选项的含义说明如下：
箭头方向
该选项可以设置三角箭头指向的方向，支持上、下、左、右四个方向。
箭头位置
即三角箭头在水平或垂直方向的偏移量。如果是上、下方向的箭头，则是水平方向的偏移量；如果是左右方向的箭头，则是垂直方向的偏移量。
另外，为了快速、方便地让箭头居中，本选项还提供「箭头恢复居中」功能（避免手动调整带来的麻烦和不准确）
箭头大小
箭头大小以像素 px 为单位，可以调整该选项，通过实时预览效果，设置自己期望的箭头大小。
注：为了能够正常地显示出箭头，该选项的取值范围是 6-30 像素。
气泡高度
该选项设置三角箭头所依附的气泡的高度，单位是像素，默认为 160 像素，可根据实际需要进行调整。
圆角大小
该选项设置气泡本身的圆角的大小，单位为像素，默认是 6 像素。
背景颜色
该选项设置气泡的背景色。
边框宽度
该选项设置三角气泡的边框的宽度，默认是 2px，可根据实际需要进行调整。
边框颜色
该选项设置三角气泡的边框的颜色。边框颜色应结合背景颜色进行设置，以达到最佳的视觉效果。
使用步骤
- 选择箭头方向（上、右、下、左）
- 调整箭头位置、大小和气泡高度
- 设置圆角、背景色、边框宽度和颜色
- 实时预览区域会显示您的设置效果
- 点击"复制代码"按钮获取CSS代码
其它说明
要使用本工具生成的 CSS 代码，应配合下面的 HTML 代码：
<div class="arrow-box">...</div>
从上面这行 HTML 可以看出，本工具只使用了一个类名是 arrow-box 的 div 元素，即可实现炫酷的三角形。从生成的 CSS 代码可以得知，其实是同时使用了 ::before 和 ::after 伪类，最终实现我们需要的三角箭头。
评论（可选）：