右边的内部箭头有轮廓边框和框阴影

时间：2013-07-24 10:16:42

标签： css css3

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

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

enter image description here

=＆GT;在顶部：我试图在css3中重现的效果 =＆GT;在底部：我只能用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代码。

小提琴：http://jsfiddle.net/2cDnV/1/

4 个答案:

答案 0 :(得分：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);
}

我玩了一些阴影和变换以达到效果。

让我知道它是否对你有帮助。

答案 1 :(得分：1)

以下是获得与原始图像完全相同的结果的最终代码：http://jsfiddle.net/developpeuse_web/TSFMT/1/

HTML：

    <div class="box">
        <div class="left-shadow"></div>
        <div class="boxIn"></div>
        <div class="boxArrowUp">
            <div class="boxArrowUpIn"></div>
        </div>
        <div class="boxArrowDown">
            <div class="boxArrowDownIn"></div>
        </div>
    </div>

CSS：

.left-shadow {
    position: absolute;
    height: 100%;
    width: 23px;
    left: 0px;
    top: 0px;
    background-image: -webkit-gradient(linear, left top, right top, from(#333333), to(transparent));
    background-image: -webkit-linear-gradient(left, #333333, transparent);
    background-image: -moz-linear-gradient(left, #333333, transparent);
    background-image: -o-linear-gradient(left, #333333, transparent);
    background-image: linear-gradient(left, #333333, transparent);
    opacity: 0.44;
    filter : alpha(opacity=44);
} 
.boxIn {
    float: left;
    border: 1px solid #fff;
    width: 100px;
    height: 20px;
    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-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.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;
}
.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;
}

谢谢Harshad！

答案 2 :(得分：0)

谢谢...当然它给了我很多帮助！ 如果它不完美，那么它非常接近：）

作为补充，我刚刚找到了另一种生成阴影的方法，使用“-webkit-filter：drop-shadow”。所以我将此属性添加到.box元素，并删除所有其他元素上的灰色框阴影（.box，.boxArrowUpIn：after，.boxArrowDownIn：after）：http://jsfiddle.net/developpeuse_web/TSFMT/ 

.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); */
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.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); */
}

不知道它是否是浏览器兼容性的更好解决方案，但看起来更清晰。

我认为我要做的最后一个细节是在左边框上添加一个内部阴影，这正是我需要的。我会在这里发布最终代码。

非常感谢！

答案 3 :(得分：0)

参加比赛是否为时已晚？

HTML 

<div id="mysolution">MY SOLUTION<div id="arrow"></div></div>

CSS 

#mysolution {
    color: red;
    padding: 10px 9px 10px 25px;
    position: relative; 
    display: block;
    z-index: 1;
    width: 170px;
    height: 30px;
    overflow: hidden;
}

#mysolution:after, #mysolution:before {
    content: " "; 
    display: block; 
    left: -20px;
    position: absolute;
    width: 80%; 
} 

#mysolution:before { 
    z-index: -2; 
    height: 30%;
    top: 11%;
    -webkit-transform: skewX(-35deg); 
    background-image: linear-gradient(55deg, black, rgb(94, 152, 186) 30%); 
    border-right: 1px solid white;
    border-top: 1px solid white;
    box-shadow: 1.52px -1px 0px #5e98ba, 4px 4px 5px rgb(110, 110, 110);
}

#mysolution:after { 
    z-index: -1; 
    height: 28%;
    bottom: 28.95%;
    -webkit-transform: skewX(35deg); 
    background-image: linear-gradient(125deg, black, rgb(94, 152, 186) 30%); 
    padding-right: .8px;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    box-shadow: 1.52px 1px 0px #5e98ba, 1.52px 0.5px 0px #5e98ba,-2px 4px 5px rgb(110, 110, 110);
}

#arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    left: 0px;
    top: 37px;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #315164 #315164 transparent transparent;
    z-index: -3;
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}

fiddle

尝试使用更少的div和更少的CSS来做到这一点。 （并从已经完成的工作中挑选想法......： - ）

相关问题
最新问题