How to set this CSS arrow transparent?

Question

I'm trying to get this result :

And here is what I have for now (I'm only trying to get the result on the left element for the moment) :

I am trying to have this left arrow transparent but I can't find how to do that.

CSS Code :

.main_container .photo_container .mask a {
    color: #FFFFFF;
    font-size: 25px;
    position: relative;
}

.main_container .photo_container .mask a:first-child {
    border: 1px solid #FFFFFF;
    padding: 5px 11px 7px;
}

.main_container .photo_container .mask a:first-child::before {
    border-bottom: 7px solid transparent;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    content: "";
    display: inline-block;
    left: -8px;
    position: absolute;
    top: 20px;
}
.main_container .photo_container .mask a:first-child::after {
    border-bottom: 24px solid transparent;
    border-right: 25px solid #eee;
    border-top: 24px solid transparent;
    content: "";
    display: inline-block;
    left: -26px;
    position: absolute;
    top: -1px;
}

HTML Code :

<div class="photo_container">
    <img src="images/placeholder/car1.png" class="img-responsive" alt="" />
    <div class="mask">
        <a href=""><i class="fa fa-search"></i></a>
        <a href=""><i class="fa fa-link"></i></a>
    </div>
</div>

Can you help me?

Answer 1

If you don't mind using transform this is pretty simple:

Making a pseudo element after the existing one, centering it on the correct side, and rotating it by 45 degrees.

The 70.71% figure is gotten using s = q / sqrt(2) where s is the side of a square, and q is the diagonal.

.arrow
{
    border:             1px white;
    border-style:       solid solid solid none;
    position:           relative;
    width:              50px;
    height:             50px;
}

.arrow::after
{
    content:            "";
    display:            block;
    top:                50%;
    left:               0;
    position:           absolute;
    border:             1px white;
    border-style:       none none solid solid;
    width:              70.71%; /* the side of a square is 70.71% the length of it's diagonal */
    height:             70.71%;
    transform:          translate(-50%, -50%) rotate(45deg);
}

Finally, we can change what borders are shown, and the absolute positioning to make the arrow appear on the desired side:

body
{
	background-color:     black;
	padding:              50px;
}

.arrow_left,
.arrow_right
{
	display:            inline-block; /* just to get them next to eachother */
	border:             1px white;
	position:           relative;
	width:              50px;
	height:             50px;
}

.arrow_left  { border-style: solid solid solid none; }
.arrow_right { border-style: solid none solid solid; }

.arrow_left::after,
.arrow_right::after
{
	content:            "";
	display:            block;
	top:                50%;
	position:           absolute;
	border:             1px white;
	width:              70.71%; /* the side of a square is 70.71% the length of it's diagonal */
	height:             70.71%;
	transform:          translate(-50%, -50%) rotate(45deg);
}

.arrow_left::after
{
	left:               0;
	border-style:       none none solid solid;
}

.arrow_right::after
{
	left:               100%;
	border-style:       solid solid none none;
}

<div class="arrow_left"></div>
<div class="arrow_right"></div>

Answer 2

You tried use border to achieve transparent triangle. It doesn't work. So let's think about other way to implement what we want. I created simple demo - any triangle is made by 2 lines (simple trigonometry knowledge needed.) http://codepen.io/anon/pen/PPbxEQ - i used some variables in css, so in that case i used stylus - more prefer read the source code, not just compiled result. We create a pseudo element for first icon. Rotate it and evaluate new height. Than change transform-origin. Easy.

We change the angle - and recalculate the cos(angle);

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("http://7-themes.com/data_images/out/2/6775415-beautiful-images.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
}
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.Icons {
  width: 50vmin;
  height: 25vmin;
  display: flex;
}
.Icon {
  flex: 1;
  border-color: currentColor;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2vw + 2vh + 4vmin);
  color: #fff;
  position: relative;
}
.Icon + .Icon {
  margin-left: -1px;
}
.Icon:first-of-type {
  border-width: 1px 1px 1px 0;
}
.Icon:last-of-type {
  border-width: 1px 0 1px 1px;
}
.Icon:first-of-type:before,
.Icon:first-of-type:after,
.Icon:last-of-type:before,
.Icon:last-of-type:after {
  content: '';
  position: absolute;
  margin: auto;
  color: inherit;
  background-color: currentColor;
  width: 1px;
  height: calc(50% / 0.866025404); /* Our angle is 30deg, so formula is calc(50% / cos(angle)) */
}
.Icon:first-of-type:before,
.Icon:first-of-type:after {
  left: 0;
}
.Icon:first-of-type:before {
  top: 0;
  transform: rotateZ(30deg);
  transform-origin: top;
}
.Icon:first-of-type:after {
  bottom: 0;
  transform: rotateZ(-30deg);
  transform-origin: bottom;
}
.Icon:last-of-type:before,
.Icon:last-of-type:after {
  right: 0;
}
.Icon:last-of-type:before {
  top: 0;
  transform: rotateZ(-30deg);
  transform-origin: top;
}
.Icon:last-of-type:after {
  bottom: 0;
  transform: rotateZ(30deg);
  transform-origin: bottom;
}

<div class="Icons">
  <div class="Icon">I</div>
  <div class="Icon">O</div>
</div>

Answer 3

The left 'arrow' cannot be transparent, because in reality it is just a solid border applied to 1/4 of a box.

(See this article explaining how the css triangle effect is achieved.)

You will either need to use images, or tweak the graphic design.