Как настроить прозрачность CSS?

Question

Я пытаюсь получить этот результат:

И вот что у меня есть сейчас (я только пытаюсь получить результат на левом элементе на данный момент):

Я стараюсь, чтобы эта левая стрелка была прозрачной, но я не могу найти, как это сделать.

CSS код:

.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 код:

<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> 

Можете ли вы мне помочь?

Answer 1

Если вы не возражаете против использования transform это довольно просто:

Создание псевдо элемента после того, как существующего, центрированное на правильной стороне, и повернув его на 45 градусов.

Рисунок 70.71% получен с использованием s = q/sqrt(2), где s - сторона квадрата, а q - диагональ.

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

Наконец, мы можем изменить то, что границы показаны, и абсолютное позиционирование, чтобы стрелка появится на нужной стороне:

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

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

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

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

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

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

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

Answer 2

Левые «стрела» не может быть прозрачным, потому что на самом деле это всего лишь сплошная граница, применяемая к 1/4 коробки.

(см это article объяснить, как достигается эффект CSS треугольник.)

Вам нужно будет либо использовать изображения или настройки графического дизайна.

Answer 3

Вы попытались использовать границу для достижения прозрачного треугольника. Это не работает. Поэтому давайте подумаем о другом способе реализации того, что мы хотим. Я создал простую демонстрацию - любой треугольник сделан двумя строками (требуется простая информация о тригонометрии.) http://codepen.io/anon/pen/PPbxEQ - Я использовал некоторые переменные в css, поэтому в этом случае я использовал стилус - больше предпочитаю читать исходный код, а не просто компилировать результат. Мы создаем псевдоэлемент для первого значка. Поверните его и оцените новую высоту. Чем изменяется трансформация-происхождение. Легко.

Изменим угол - и пересчитаем cos (угол);

*, 
 
*: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>