1

I have been playing at this all day. I want the effect like this link:

http://demo.bloooming.com/rebloom/

You will see in the nav bar that there is a css arrow that is transparent and you can see the background image through it.

I have tried and tried to get this to work and now I have gotten myself into a spin with a headache (not great for a Friday night - that feeling is usually reserved for a Saturday morning). I have searched and searched the internet and found various hints but can't seem to recreate it!!!

Here is the Fiddle

body {
background: url(http://www.conti.co.uk/images/jpg/box-2.jpg);
background-size: cover;
}

.wrap {
width: 500px;
height: 200px;
display: block;
position: relative;
background: #c00;
}

.vc-arrow-left {
width: 20px;
height: 200px;
right: 0;
background: none;
position: absolute;
display: block;
}

.vc-arrow-left:before,
.vc-arrow-left:after {
content: '';
position: absolute;
box-sizing: border-box;
/*background: #000;*/
top: 50%;
right: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid green;
}

I left the arrow green to show how I want it - obviously this is just a page of meeting - not the real finished product!!

Thanks

Harry
  • 87,580
  • 25
  • 202
  • 214
Jan Solo
  • 17
  • 5
  • You might already find your answer here: [Transparent arrow/triangle](http://stackoverflow.com/questions/23758922/transparent-arrow-triangle) – jbutler483 Apr 17 '15 at 16:22
  • you can always add a background image of solid black and a triangle cut off :) – Abdul Ahmad Apr 17 '15 at 16:22
  • I believe the site you referenced is using an [interface font](http://demo.bloooming.com/rebloom-html/layout-3-icons.html) (rebloom-interface.woff). – showdev Apr 17 '15 at 16:23
  • The site you refer too is using the border technique described here: [Transparent arrow/triangle](http://stackoverflow.com/a/23759602/1811992) – web-tiki Apr 17 '15 at 16:28
  • I tried utilising the code in the "duplicate" post - before I posted here - I tried EVERYTHING to get it to work in the situation I need it but just can't get it to work. It is driving bonkers :) – Jan Solo Apr 20 '15 at 16:13
  • @JanSolo see this https://jsfiddle.net/webtiki/e0mso1Ld/1/ it uses the border technique in the "duplicate post". – web-tiki Apr 21 '15 at 08:33
  • @web-tiki Thank you very much - I was almost there!! I was getting myself tangled up in the wrong bit and getting confused. Thank you again. – Jan Solo Apr 21 '15 at 10:51

0 Answers0