如何设置此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度。

使用s = q / sqrt(2)得到70.71％的数字，其中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);
}

最后，我们可以更改显示的边框，以及使箭头显示在所需边上的绝对位置：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

左边的'箭头'不能是透明的，因为实际上它只是一个应用于1/4盒子的实线边框。

（请参阅此article解释如何实现css三角效果。）

您需要使用图像，或调整图形设计。

Answer 3

您尝试使用border来实现透明三角形。它不起作用。因此，让我们考虑实现我们想要的其他方式。 我创建了简单的演示 - 任何三角形由2行（需要简单的三角知识）。 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>