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

Question

我想在我的网站上添加以下箭头：

如何使用具有透明背景的css3制作此图像？

谢谢

Answer 1

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

<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; 
   }

Answer 2

您可以将字体用于箭头，然后将CSS用于圆圈。

查看使用Font Awesome进行的提琴制作： http : //jsfiddle.net/t2UA5/1/

<div class="halfCircleLeft"><i class="fa fa-angle-left"></i></div>
<div class="halfCircleRight"><i class="fa fa-angle-right"></i></div>

的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;
}

Answer 3

这是简单的箭头，现在您可以添加阴影等等。

<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;
}