How to set this CSS arrow transparent? - html

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">
<i class="fa fa-search"></i>
<i class="fa fa-link"></i>
</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

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.

Answer 3

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>