有人可以帮助我解决这个CSS问题吗？

Question

有人可以帮我解决这个CSS问题吗？我想创建一个带有指向div内的箭头的HTML调用框。到目前为止，我所见过的所有教程都有指向左侧，右侧，顶部或底部的箭头。 我使用的例子从这里http://cssarrowplease.com/

Answer 1

旋转它，改变它的顶部，左侧，并相应地缘的位置

.arrow_box:after, .arrow_box:before { 
    left: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    -ms-transform: rotate(180deg); /* IE 9 */ 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
    transform: rotate(180deg); 
} 

Answer 2

你只需要改变的位置：前：伪元素后：

http://jsfiddle.net/7nmtgoqo/2/

通常右箭头在这个生成器有样式规则left:100%;和：有相匹配的DIV背景边框颜色之后。如果您更新left和top，同时保持它的形状也将围绕移动箭头价值观......在拨弄我的评论的CSS线从cssarrowplease生成的样式我更新。

Answer 3

我相信你可以得到你的要求通过这个简单的代码来完成：

<style> 
.outerDiv{ 
width:100px; 
height:100px; 
background:red 
} 

.inwardArrow{ 
    margin:0 auto; 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid white; 
} 
</style> 

<div class="outerDiv"> 
<div class="inwardArrow"></div> 
</div> 

Answer 4

.arrow_box { 
 
\t position: relative; 
 
\t background: #88b7d5; 
 
\t border: 4px solid #c2e1f5; 
 
    margin-top:150px; 
 
    margin-left:150px; 
 
    padding:15px; 
 
    height:150px; 
 
    width:60%; 
 
    text-align:center; 
 
    line-height: 100px; 
 
} 
 
.arrow_box:after, .arrow_box:before { 
 
\t  bottom: 100%; 
 
    left: 50%; 
 
    border: solid rgba(0, 0, 0, 0); 
 
    content: " "; 
 
    top: -4px; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    transform: rotate(180deg); 
 
} 
 

 
.arrow_box:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
    border-bottom-color: #FFF; 
 
    border-width: 30px; 
 
    margin-left: -30px; 
 
} 
 
.arrow_box:before { 
 
\t  border-color: rgba(194, 225, 245, 0); 
 
    border-bottom-color: #c2e1f5; 
 
    border-width: 36px; 
 
    margin-left: -36px; 
 
}

<div class="arrow_box"> 
 
      <h1 class="logo">css arrow please!</h1> 
 
      </div>

这里是这段代码

Demo code演示工作代码