Html 使用css3创建具有css箭头的框

.box{
位置：相对位置；
利润率：18px；
宽度：8em；
身高：6em；
边框：1px实心rgb（77,77,77）；
颜色：#FF1919；
背景颜色：粉红色；
}
.box:悬停{
宽度：8em；
利润率：18px；
}
.盒子：以前{
内容：''；
位置：相对位置；
宽度：30%；
左：18px；
右：80%；
高度：40px；
最高：30%；
背景：rgba（0,0,0,0.1）；
显示：内联块；
背景颜色：蓝色；
}
.盒子：之后{
内容：''；
位置：绝对位置；
左：43%；
最高：30%；
利润上限：-18px；
边框样式：实心；
边框宽度：40px；
边框颜色：透明rgba（0,0,0,0.1）；
}

---

也许你可以使用这样一个HTML特殊字符箭头符号➧ <代码>➧ 这样你就可以随心所欲地玩颜色、大小等了

代码如下：

➧这是一个单独的div

这是一个输入。请注意，类型已更改为button

<div style="position: absolute; right: 40px; bottom: 70px;">
<form action="abc.html" align="right" style="margin-right:100px ;   display:inline">
    <input type="button" class="box" value="&#10151;"></input>
</form>

}你可以简单地使用伪元素


.arrow{
高度：50px；
宽度：50px；
背景：#0000ff；
利润率：20px；
位置：相对位置；
}
.阿罗：之后{
内容：''；
位置：绝对位置；
顶部：-15px；
右：-80px；
宽度：0；
身高：0；
边框顶部：40px实心透明；
左边框：80px实心#0000ff；
边框底部：40px实心透明；
}
.盒子{
宽度：165px；
填充：20px；
边框：1px实心#222；
背景：#eee；
}
您只需更改表示头部的
：伪元素之后的属性

 border-color: transparent transparent transparent rgba(0, 0, 255, 1);


.box{
位置：相对位置；
利润率：18px；
宽度：8em；
身高：6em；
边框：1px实心rgb（77,77,77）；
颜色：#FF1919；
背景颜色：粉红色；
位置：相对位置；
}
.盒子：以前{
内容：''；
位置：绝对位置；
宽度：30%；
左：20%；
高度：40px；
最高：50%；
转化：translateY（-50%）；
背景：rgba（0,0,0,0.1）；
背景颜色：蓝色；
}
.盒子：之后{
内容：''；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
左：50%；
/*宽度前30%+左位置前20%*/
边框样式：实心；
边框宽度：40px；
边框颜色：透明rgba（0,0,255,1）；
}
对于导航，您可以添加内容：“21BA”；是的，我甚至用上面的标签检查过，我无法更改特殊字符的大小。虽然这可能不是你想要的，它可能会有帮助：它很好，但我需要我前面提到的确切按钮。为什么不将
。框：after
更改为
边框颜色：透明蓝色
我需要矩形/框中的箭头。@rJ7您前面提到的代码非常棒，但是#href标记将指向下一页/选项卡。我需要导航应该在同一个页面或标签中完成，因此我想我们不能使用#href标签对吗？？
 border-color: transparent transparent transparent rgba(0, 0, 255, 1);

<a href="http://www.w3schools.com" target="_blank"><div class="box"></div></a>

 .box:after {
      content: '';
      position: absolute;
      left: 43%;
      top: 30%;
      margin-top: -18px;
      border-style: solid;
      border-width: 40px;
      border-color: transparent transparent transparent **rgba(7, 17, 241, 1);**    }