Inside arrow on the right with border outline and boxshadow

Question

I am trying to add css3 styles for an element based on the image model. After many searches, I was able to get some results, but not all that I need.

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

=> top: the effects I'm trying to play in css3
=> bottom: effects that I could only implement with css3 : very far from perfect ^^

As you can see, there are problems with the border and the 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 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 ; } 

What do you think I'm trying to do, maybe only with css3?
If so, could you please help me find the correct css3 code.

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

Answer 1

I know that my solution is not like your image, but it can help you get started.

You can play a little code to get what you want and bring it elegance.

Here you can find jsFiddle .

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 played a little with shadows and trunks to achieve a result.

Let me know if this helped you.

Answer 2

Here is the final code to get 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; } 

Thank you Harshad!

Answer 3

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

In addition, I just found another way to generate shadow using "-webkit-filter: drop-shadow". Therefore, I add this attribute to the .box element and remove the gray 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); */ } 

I don't know if this is the best solution for browser compatibility, but it looks a little cleaner.

I think the last detail I have to do is add an inner shadow to the left border, and that will be exactly what I need. Here I will lay out the final code.

Thank you very much!

Answer 4

Too late for the contest?

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

Just trying to do this with less div and less CSS. (And collecting ideas from work already done :-)