制作带箭头html css,html – 使用css3创建具有css箭头的框

.box {

position: relative;

margin: 18px;

width: 8em;

height: 6em;

border: 1px solid rgb(77, 77, 77);

color: #FF1919;

background-color: pink;

}

.box:hover {

width: 8em;

margin: 18px;

}

.box:before {

content: '';

position: relative;

width: 30%;

left: 18px;

right: 80%;

height: 40px;

top: 30%;

background: rgba(0, 0, 0, 0.1);

display: inline-block;

background-color: blue;

}

.box:after {

content: '';

position: absolute;

left: 43%;

top: 30%;

margin-top: -18px;

border-style: solid;

border-width: 40px;

border-color: transparent transparent transparent rgba(0, 0, 0, 0.1);

}

我创建了一个箭头,我希望突出显示蓝色的箭头,这是灰色的.

我还想使用此总箭头作为按钮导航到具有html扩展名的下一个场景页面.

为此我正在使用：

但它占用了css对象(矩形)框的一部分并留下了其他部分.