在面前添加一个箭头

我试图给div添加一个箭头形状。我设法将它添加到div的结尾，但我很难找出如何将它添加到前面，而无需使用新的类。只有一个班级可以实现吗？在面前添加一个箭头

编辑：我回答这个问题有不同的形状的方法，我觉得他们都是3非常有用：

.arrow { 
 
    margin-left: 100px; 
 
    position: relative; 
 
    background: pink; 
 
    width: 400px; 
 
    height: 100px; 
 
    text-align:center; 
 
    line-height:100px; 
 
    margin-bottom:10px; 
 
} 
 

 
.arrow:after { 
 
    border: solid transparent; 
 
    content: " "; 
 
    position: absolute; 
 
    border-bottom-color: white; 
 
    border-width: 50px; 
 
    left: 0; 
 
    top: 0; 
 
    transform: rotate(90deg); 
 
} 
 

 
.arrow:before { 
 
    border: solid transparent; 
 
    content: " "; 
 
    position: absolute; 
 
    border-bottom-color: pink; 
 
    border-width: 50px; 
 
    left: 400px; 
 
    top: 0; 
 
    transform: rotate(90deg); 
 
}

<div class="arrow"> 
 
    1 
 
</div> 
 
<div class="arrow"> 
 
    2 
 
</div>

来源

2016-12-14 HendrikEng

[在CSS的两边添加箭头？]（http://stackoverflow.com/questions/18722059/adding-an-arrow-on-both-sides-of-a-div -using-css） – TylerH

@TylerH谢谢还没有看到一个，它虽然有点不同，但我认为内部div将是必要的比..我会尝试适应它，并回答如果我成功。如果有人有更好的方式，请大声喊出来。感谢球员 – HendrikEng

我已经修改了人字形，从这个页面：https://css-tricks.com/examples/ShapesOfCSS/（借来的想法，学分张炳良蒂克纳:)）

.chevron { 
 
    position: relative; 
 
    text-align: center; 
 
    height: 60px; 
 
    width: 260px; 
 
    line-height:60px; 
 
    
 
margin-bottom:10px; 
 

 
} 
 

 
.chevron:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 3%; 
 
    height: 50%; 
 
    width: 100%; 
 
    
 
    transform: skew(25deg, 0deg); 
 
    border:1px solid red; 
 
    border-bottom:none; 
 
} 
 

 
.chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 3%; 
 
    height: 50%; 
 
    width: 100%; 
 
    
 
    transform: skew(-25deg, 0deg); 
 
     border:1px solid red; 
 
    border-top:none; 
 
}

<div class="chevron">1</div> 
 
<div class="chevron">2</div>

所以，一格和两个伪元素，正确地画出来，边框隐藏在哪里需要。

来源

2016-12-14 22:58:44 sinisake

您将需要一个内元件。这个元素是什么，完全取决于你。在这里我使用了<span>来显示左箭头。

.arrow { 
 
    float: left; 
 
    width: 128px; 
 
    height: 50px; 
 
    background-color: white; 
 
    border: 1px solid green; 
 
    position: relative; 
 
    margin-right: 40px; 
 
    text-align: center; 
 
    border-left: none; 
 
} 
 

 
.arrow:after,.arrow span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 128px; 
 
    width: 0; 
 
    height: 0; 
 
    border: 25px solid transparent; 
 
    border-left: 12px solid white; 
 
    z-index: 2; 
 
} 
 

 
.arrow:before,.arrow span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 129px; 
 
    width: 0; 
 
    height: 0; 
 
    border: 25px solid transparent; 
 
    border-left: 12px solid green; 
 
    z-index: 1; 
 
} 
 
.arrow span:after { 
 
    left: 0; 
 
} 
 

 
.arrow span:before { 
 
    left: 1px; 
 
}

<div class="arrow"><span></span>1</div> 
 
<div class="arrow"><span></span>2</div> 
 
<div class="arrow"><span></span>3</div> 
 
<div class="arrow"><span></span>4</div> 
 
<div class="arrow"><span></span>5</div>

来源

2016-12-14 22:33:34 junkfoodjunkie

啊这是有道理的，我设法得到类似的东西没有内在的元素，但不知道它是否有意义:) http://codepen.io/HendrikEng/pen/bBQpKa – HendrikEng

这工作正常，但你不会能够为内部内容分配一个单独的背景颜色，以及与该解决方案的边界。 – junkfoodjunkie

啊，是的，非常感谢，这是真的 – HendrikEng

在面前添加一个箭头

回答

相关问题