有人可以幫助我解決這個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演示工作代碼