Inside arrow on the right with outline border and boxshadow

Question

I'm trying to add some css3 styles on an element, basing on an image model. After many search, I've been able to have a some results, but not all I need.

You can see on the following image : http://soultherapy.free.fr/img/css3_need_screen.png

=> on the top : the effects I'm trying to reproduce in css3
=> on the bottom : the effects I was able to realize with css3 only : very very far from perfection ^^

As you can see, there are problems with border and shading of the right arrow...

Here is the html code :

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

And the css code :

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

Do you think what I'm trying to do is possible only with css3 ?
If it's the case, could you help me to find the correct css3 code.

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

Answer 1

Is it too late to enter the contest ?

The HTML

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

The 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

Just trying to do it with less divs and less CSS. (And picking ideas from the work already done... :-)

Answer 2

Here is the final code to obtain exactly the same result as in the original image : 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;
}

Thanks Harshad !

Answer 3

Thanks...of course it helped me a lot ! If it's not perfect, well it's very close :)

In complement, I've just found another way to generate shadow, by using "-webkit-filter: drop-shadow". So I've add this attribute to .box element, and remove the grey box-shadow on all other elements (.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); */
}

Don't know if it's a better solution for browsers compatibility, but looks a little bit cleaner.

I think the last detail I have to do is to add an inner shadow on the left border, and it will be exactly what I need. I'll post the final code here.

Thanks very much !

Answer 4

I know my solution does not look exactly like your image but might help you to get started.

You can play around the code a bit to get what you want and to bring elegance to it.

You can find the 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);
}

I've played a bit with shadows and tranforms to achieve the result.

Let me know if it helped you.