Question

我需要在div的右侧有一个箭头，但这个箭头不起作用。

这是小提琴：

箭头正确显示在div的左侧，但我希望它显示在右侧（对侧）。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这适用于左侧

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

Answer 1

而不是：

.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

Answer 2

callout.left必须是::before，而不是::after或:after，与.callout::before风格相同。

代码应该是这样的

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

Answer 3

我认为您可以尝试以下方法：

     .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>

Answer 4

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

在盒子的右侧需要一个箭头

4 个答案: