箭头前后有一个盒子的CSS [英] Arrow before and after a box with CSS

问题描述

我试图在单个框中创建两个箭头，一个作为指针，另一个箭头则放在框后面的框中。

找不到

这里我发布了一个链接示例： http://jsfiddle.net/7Esu2/

CSS：

  .arrow {
 width：210px; 
 height：40px; 
 background-color：#CBCBCB; 
 border：1px solid #CBCBCB; 
 position：relative; 
 text-align：center; 
 font-size：20px 
 font-weight：bold; 
 line-height：40px; 
} 
 .arrow：after {
 content：''; 
 position：absolute; 
 top：-1px; 
 left：210px; 
 width：0; 
 height：0; 
 border：21px solid transparent; 
 border-left：15px solid #CBCBCB; 
} 
 .arrow：before {
 content：''; 
 position：absolute; 
 top：-1px; 
 left：211px; 
 width：0; 
 height：0; 
 border：21px solid transparent; 
 border-left：15px solid #CBCBCB; 
} 
  

HTML：

 < div class =arrow> 
 FLECHA 
< / div> 
  

解决方案

我更喜欢使用内嵌块而不是绝对定位。还有，before和：after之后创建子元素（内部）你指定的元素（在开始和结束）。为此，最好有一个封装（或内部）块，如下：

 < div class = arrow> 
< div class =inner-arrow> 
 FLECHA 
< / div> 
< / div> 
  

然后内部块将获得大部分样式，因为包装器主要包含：之前和：之后。包装器（.arrow）需要有font-size：0（或其他方法，使内部块的空白区域，.inner-arrow，走开）。

  .arrow {
 font-size：0; 
} 
 .inner-arrow {
 width：210px; 
 height：40px; 
 display：inline-block; 
 background-color：#CBCBCB; 
 text-align：center; 
 font-size：20px; 
 font-weight：bold; 
 line-height：40px; 
 vertical-align：middle; 
} 
  

.arrow：before和.arrow：同样，所以我们将这些。然后指定以下差异（必须在下面覆盖通用样式）。

  .arrow：before，
 .arrow：after {
 content：''; 
 display：inline-block; 
 width：0; 
 height：0; 
 border：20px solid transparent; 
 vertical-align：middle; 
} 
 .arrow：before {
 border-top-color：#CBCBCB; 
 border-bottom-color：#CBCBCB; 
 border-right-color：#CBCBCB; 
} 
 .arrow：after {
 border-left-color：#CBCBCB; 
} 
  

这全部在a

I'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind.

Can not find the way to get the arrow right behind.

Someone can help me??

here i post the link with the sample: http://jsfiddle.net/7Esu2/

CSS:

.arrow {
    width:210px;
    height:40px;
    background-color:#CBCBCB;
    border: 1px solid #CBCBCB;
    position:relative;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:40px;
}
.arrow:after {
    content:'';
    position:absolute;
    top:-1px;
    left:210px;
    width:0;
    height:0;
    border:21px solid transparent;
    border-left:15px solid #CBCBCB;
}
.arrow:before {
    content:'';
    position:absolute;
    top:-1px;
    left:211px;
    width:0;
    height:0;
    border:21px solid transparent;
    border-left:15px solid #CBCBCB;
}

HTML:

<div class="arrow">
    FLECHA
</div>

解决方案

I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:

<div class="arrow">
    <div class="inner-arrow">
        FLECHA
    </div>
</div>

Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).

.arrow {
    font-size: 0;
}
.inner-arrow {
    width:210px;
    height:40px;
    display: inline-block;
    background-color:#CBCBCB;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:40px;
    vertical-align: middle;
}

Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).

.arrow:before,
.arrow:after {
    content:'';
    display: inline-block;
    width:0;
    height:0;
    border:20px solid transparent;
    vertical-align: middle;
}
.arrow:before {
    border-top-color: #CBCBCB;
    border-bottom-color: #CBCBCB;
    border-right-color: #CBCBCB;
}
.arrow:after {
    border-left-color: #CBCBCB;
}

This is all in the a fiddle.

这篇关于箭头前后有一个盒子的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！