如何在div中添加具有不同背景颜色的框？

Question

我的情景：

在下面提到的div中我需要在div的右下角添加Find Out More链接，该链接应该包含不同的bg-color，换句话说就是最后一个带箭头图像的box结构。

.answerbox
{
height: 150px; /*Specify Height*/
width:  150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}

它的外观：

Answer 1

你是说这个意思吗？这是一个jsfiddle

通过将父（.answerbox）设置为position: relative，我可以将.more设置为position:absolute并将其放置在该框中的任意位置;在这种情况下，容器的右下角。

<强> HTML

<div class="answerbox">
    <a href="#" class="more">Find out more</a>
</div>

<强> CSS

.answerbox {
    height: 150px; /*Specify Height*/
    width:  150px; /*Specify Width*/
    border: 1px solid black; /*Add 1px solid border, use any color you want*/
    background-color: green; /*Add a background color to the box*/
    text-align:center; /*Align the text to the center*/
    position: relative;
}
.more {
    background: red;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    height: 30px;
}

编辑 - 如果您想要按钮上的箭头图像

Updated Fiddle

<强> CSS

.more {
    background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30px;
    padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
    line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}

编辑 - 让框随内容增长

Updated Fiddle

<强> CSS

.answerbox {
    width:  150px; /*Specify Width*/
    border: 1px solid black; /*Add 1px solid border, use any color you want*/
    background-color: green; /*Add a background color to the box*/
    text-align:center; /*Align the text to the center*/
    position: relative;
    padding: 10px 10px 40px;
}

Answer 2

你的意思是这样的：

<div class="answerbox">
    <a href='#' class="findout">
        find out more..
    </a>
</div>

和

.findout
{
    position:relative;
    top:120px;
    left:20px;
    background-color:white;
    color:Red;
}

请参阅fiddle