Html 如何使用css3制作方框箭头？

我想在我的网站上制作以下箭头：

如何使用具有透明背景的css3制作这个

---

谢谢

我认为这段代码可以帮助您：

<div class="arrow-bg">
   <div class="arrow">
   </div>
</div>

.arrow-bg {
border-radius:30px;
box-shadow:-10px 0 8px #EDEDED;
padding:20px 15px;
width:30px;
}
.arrow {
width: 0; 
height: 0; 
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;  
border-right:10px solid blue; 
   }

.箭头背景{
边界半径：30px；
盒影：-10px 0 8px#eded；
填充：20px 15px；
宽度：30px；
}
.阿罗{
宽度：0；
身高：0；
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px纯蓝色；
}

您可以使用字体表示箭头，然后使用CSS表示圆圈

请参见“使用字体处理小提琴”：

---

这是一个简单的箭头，现在你可以添加阴影等等

<div id="some_div">some text</div>
<div id="arrow"></div>

#arrow {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid white;
    float: left;
    height: 1px;
}

一些文本
#箭{
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px纯白；
浮动：左；
高度：1px；
}

请在哪些方面更加具体。您可以使用图像标记..只需在paint.net中编辑图像即可使用您发布在此处的图像删除白色区域。与使用图像相比，使用css可能会降低性能。感谢_Green先生和Palmer先生的重播。当我使用图像时，我没有降低性能？因此，图像比css好？@mayconbelfort，除非您使用过大的图像，否则图像的性能会更好。但是，您当然可以使用CSS做更多的工作。例如。

.halfCircleRight{
     height:90px;
     width:45px;
     border-radius: 0 90px 90px 0;
     -moz-border-radius: 0 90px 90px 0;
     -webkit-border-radius:  0 90px 90px 0;
     background:transparent;
    -webkit-box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    4px 0px 25px 0px rgba(50, 50, 50, 0.75);
box-shadow:         4px 0px 25px 0px rgba(50, 50, 50, 0.75); 
    position:relative;
    z-index:50;
}

.halfCircleLeft{
     height:90px;
     width:45px;
     border-radius: 90px 0 0 90px;
     -moz-border-radius: 90px 0 0 90px;
     -webkit-border-radius: 90px 0 0 90px;
     background:transparent;
    -webkit-box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
box-shadow:         -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
        position:relative;
    z-index:50;
}

.fa.fa-angle-left {
    color:#27367A;
    font-size:30px;
        position:relative;
    z-index:150;
    top:30px;
    left:20px;
}
.fa.fa-angle-right {
    color:#27367A;
    font-size:30px;
        position:relative;
    z-index:150;
    top:30px;
    left:15px;
}

<div id="some_div">some text</div>
<div id="arrow"></div>

#arrow {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid white;
    float: left;
    height: 1px;
}