在箱子右側需要一個箭頭

我需要一個箭頭在div的右側，但這個不工作。在箱子右側需要一個箭頭

這裏是小提琴：

箭頭正確的div的左側出現，但我希望它出現在右側（對面）。

body { 
 
    font-family: Helvetica; 
 
    font-size: 13px; 
 
} 
 
div.callout { 
 
    height: 20px; 
 
    width: 130px; 
 
    /*float: left;*/ 
 
    z-index: 1; 
 
} 
 
div.callout { 
 
    background-color: #444; 
 
    background-image: -moz-linear-gradient(top, #444, #444); 
 
    position: relative; 
 
    color: #ccc; 
 
    padding: 20px; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 0px 20px #999; 
 
    //margin: 25px; 
 
    min-height: 20px; 
 
    border: 1px solid #333; 
 
    text-shadow: 0 0 1px #000; 
 
    /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/ 
 
} 
 
.callout::before { 
 
    content: ""; 
 
    width: 0px; 
 
    height: 0px; 
 
    border: 0.8em solid transparent; 
 
    position: absolute; 
 
} 
 
.callout.top::before { 
 
    left: 0%; 
 
    bottom: -20px; 
 
    border-top: 11px solid #444; 
 
} 
 
.callout.bottom::before { 
 
    left: 45%; 
 
    top: -20px; 
 
    border-bottom: 10px solid #444; 
 
} 
 
.callout.right::before { 
 
    left: -20px; 
 
    top: 40%; 
 
    border-right: 10px solid #444; 
 
} 
 
/*  .callout.left::after { 
 
       right: -20px; 
 
       top: 40%; 
 
       border-left: 10px solid #444; 
 
      } 
 
      */ 
 

 
.callout.left:after { 
 
    right: -20px; 
 
    top: 40%; 
 
    border-left: 10px solid #444; 
 
}

<div class="callout left">test</div>

這適用於左側

<div class="callout right">test</div>

來源

2016-09-16 user1050619

請稍微描述一下......好的，也許更具描述性。 –

正常情況下，你在標註權利有這個「.callout.right ::之前」，並在標註留下你有「.callout.left：之後」...你是否錯過了一個：？ – TwoDent

soorry，提供更多的細節..不添加小提琴 – user1050619

的callout.left必須::before，不::after或:after，同你給.callout::before風格。

的代碼應該喜歡這個

.callout.left::before { 
    right: -20px; 
    top: 40%; 
    border-left: 10px solid #444; 
}

來源

2016-09-16 02:15:37

取而代之的是：

.callout.left::after { 
    right: -20px; 
    top: 40%; 
    border-left: 10px solid #444; 
}

使用此：

.callout.left::before { 
    right: -20px; 
    top: 40%; 
    border-left: 10px solid #444; 
}

和可選，對於一個完全居中箭頭，使用這個：

.callout.left::before { 
    right: -20px; 
    top: 50%; 
    transform: translateY(-50%); 
    border-left: 10px solid #444; 
}

revised fiddle

對於中心技術的說明，看到這個帖子：Element will not stay centered, especially when re-sizing screen

來源

2016-09-16 02:15:59

#right { 
background-color: #333; 
height: 60px; 
position: relative; 
width: 150px; 
border-radius:5px; 
float:right; 
font-family:Helvetica; 
color:#FFF; 
text-align:center; 
line-height:55px; 
} 

#right:after { 
content: ' '; 
height: 0; 
position: absolute; 
width: 0; 
border: 10px solid transparent; 
border-top-color: #333; 
top: 100%; 
left: 50%; 
margin-left: -10px; 
} 

**** 

<div id="right">test</div>

** https://jsfiddle.net/razia/peeq2aam/ *

如果進一步想請檢查此鏈接： - http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

來源

2016-09-16 04:42:40

在箱子右側需要一個箭頭

回答

相關問題