Need an arrow on right side of the box

Question

I need an arrow on the right side of the div but this one is not working.

Here is the fiddle:

The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).

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>

This works on the left hand side

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

Be a little bit more descriptive... Ok, maybe a lot more descriptive. — Wes Foster, Sep 16 '16 at 02:00
Is normal that you in callout right have this ".callout.right::before" and in callout left you have ".callout.left:after"... Are you miss one : ? — TwoDent, Sep 16 '16 at 02:02

score 1 · Answer 1 · edited May 23 '17 at 12:32

Instead of this:

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

Use this:

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

And, optionally, for a perfectly centered arrow, use this:

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

revised fiddle

For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen

score 0 · Answer 2 · answered Sep 16 '16 at 02:15

0

The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.

The code should like this

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

answered Sep 16 '16 at 02:15

Engkus Kusnadi

2,386
2
18
40

score 0 · Answer 3 · answered Dec 07 '20 at 04:48

I think you may try something like this:

     .callout {
            position: relative;
            top: 0;
            left: 0;
            display: block;
            padding: 10px;
        }
        
        .callout.right {
            margin-left: 10px;
        }
        
        .callout.right::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 0;
            height: 0;
            margin-top: -10px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #a8c3e5;
            content: '';
        }
        
        .callout.right::after {
            position: absolute;
            top: 50%;
            left: 2px;
            width: 0;
            height: 0;
            margin-top: -10px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #f9f9f9;
            content: '';
        }
        
        .callout-inner {
            padding: 2px;
            width: 240px;
            overflow: hidden;
            background: black;
            background: #a8c3e5;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        
        .callout-content {
            padding: 14px;
            margin: 0;
            background-color: #f9f9f9;
            color: #39569A;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding-box;
            background-clip: padding-box;
        }

  <div class="callout right">
        <div class="callout-inner">
            <div class="callout-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </div>
    </div>

Razia sultana · Answer 4 · 2019-08-30T10:10:05.393

#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/

Need an arrow on right side of the box

4 Answers4