css - 右侧带有轮廓边框和框阴影的内部箭头

Question

我正在尝试基于图像模型在元素上添加一些 css3 样式。经过多次搜索，我已经能够得到一些结果，但不是我需要的全部。

您可以在下图中看到:http://soultherapy.free.fr/img/css3_need_screen.png

=> 在顶部:我试图在 css3
中重现的效果=> 在底部:我只能使用 css3 实现的效果:离完美还差得很远 ^^

如您所见，右箭头的边框和阴影存在问题...

这是 html 代码:

<div class="span6">
   <a href="#" class="arrow-box">the text<b></b></a>
</div>

CSS 代码:

.arrow-box, .arrow-box:hover {        
    position: relative;
    display: inline-block; 
    font-weight: bold;     
    padding: 6px 12px 6px 30px;
    margin: 10px 10px 10px -18px;
    color: #fff !important;
    background-color: #5e98ba;  
    -webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
    -moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
    box-shadow: 3px 2px 4px rgba(0,0,0,.5);

    outline: 1px solid #5e98ba;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:1px solid #c4c7c9;
    border-left: 0;
    }  


.arrow-box:before{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #315164 #315164 transparent transparent;
}

.arrow-box:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -10px;
    top: 0;
    border-width: 10px 5px;
    border-style: solid;
    border-color: #5e98ba transparent transparent #5e98ba  ;
}
.arrow-box b {
    position: absolute;
    width: 0;
    height: 0;
    right: -10px;
    bottom: 0;
    border-width: 10px 5px;
    border-style: solid;
    border-color:  transparent transparent #5e98ba #5e98ba ; 
}

你认为我想做的事情只有 css3 才有可能吗？
如果是这样，你能帮我找到正确的 css3 代码吗？

fiddle :http://jsfiddle.net/2cDnV/1/

Answer 1

我知道我的解决方案与您的图片并不完全相同，但可能会帮助您入门。

您可以稍微修改一下代码以获得您想要的并使其优雅。

您可以找到 jsFiddle here.

HTML:

<div class="marginer">
    <div class="box">
        <div class="boxIn">This is text</div>
        <div class="boxArrowUp">
            <div class="boxArrowUpIn"></div>
        </div>
        <div class="boxArrowDown">
            <div class="boxArrowDownIn"></div>
        </div>
    </div>
</div>

CSS:

.marginer {
    margin: 20px;
}
.boxIn {
    float: left;
    border: 1px solid #fff;
    border-right: 0;
    padding: 6px 12px 6px 30px;
    box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
    position: relative;
    display: inline-block;
    font-weight: bold;
    margin: 10px 10px 10px -18px;
    color: #fff !important;
    background-color: #5e98ba;
    -webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
    -moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 8px 3px 6px rgba(0, 0, 0, .5);
}
.box:before {
    content:' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
    content:' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -10px;
    top: 0;
    border-width: 10px 5px;
    border-style: solid;
    border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
    content:' ';
    position: absolute;
    width: 10px;
    height: 20px;
    top: -10px;
    left: -5px;
    border-top: 1px solid #fff;
    border-right: 0px;
    box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
    content:' ';
    position: absolute;
    width: 2px;
    height: 20px;
    top: -11px;
    left: -1px;
    background: #5e98ba;
    border-left: 1px solid #fff;
    -moz-transform:rotate(28deg);
    -webkit-transform:rotate(28deg);
    -o-transform:rotate(28deg);
    -ms-transform:rotate(28deg);
    z-index: 2;
    box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
}
.boxArrowDown {
    content:' ';
    position: absolute;
    width: 0;
    height: 0;
    right: -10px;
    bottom: 0;
    border-width: 10px 5px;
    border-style: solid;
    border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
    content:' ';
    position: absolute;
    width: 10px;
    height: 20px;
    bottom: -10px;
    left: -5px;
    border-bottom: 1px solid #fff;
    border-right: 0px;
    box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
    content:' ';
    position: absolute;
    width: 2px;
    height: 19px;
    bottom: -11px;
    left: -1px;
    background: #5e98ba;
    border-left: 1px solid #fff;
    -moz-transform:rotate(332deg);
    -webkit-transform:rotate(332deg);
    -o-transform:rotate(332deg);
    -ms-transform:rotate(332deg);
    z-index: 2;
    box-shadow: 1px 4px 3px rgba(0, 0, 0, .5);
}

我使用了一些阴影和变换来实现这个结果。

如果对您有帮助，请告诉我。