What is the best way to make this CSS arrow see-through?

Question

What is the best way to make this CSS arrow see-through?

My goal is to achieve this desired outcome:

https://i.sstatic.net/4eTpE.png

Currently, I have the following (focusing only on the left element for now):

https://i.sstatic.net/nUFp1.png

I am struggling to make the left arrow transparent and I can't seem to figure out how.

This is the CSS Code I have so far:

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

This is the corresponding 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>

Any assistance would be greatly appreciated!

html css

Answer 1

Answer №1

If you're open to utilizing the transform property, here's a straightforward approach:

To achieve this effect, create a pseudo element positioned after the original one, center it correctly, and apply a 45-degree rotation.

The calculation for the 70.71% figure involves using s = q / sqrt(2), where s represents the side length of a square and q denotes the diagonal length.

.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 its diagonal */
    height:             70.71%;
    transform:          translate(-50%, -50%) rotate(45deg);
}

To customize which borders are displayed and adjust the positioning for the arrow to show up on the desired side, make the following tweaks:

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

.arrow_left,
.arrow_right
{
display:            inline-block; /* for side-by-side placement */
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 its 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

If you're open to utilizing the transform property, here's a straightforward approach:

To achieve this effect, create a pseudo element positioned after the original one, center it correctly, and apply a 45-degree rotation.

The calculation for the 70.71% figure involves using s = q / sqrt(2), where s represents the side length of a square and q denotes the diagonal length.

.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 its diagonal */
    height:             70.71%;
    transform:          translate(-50%, -50%) rotate(45deg);
}

To customize which borders are displayed and adjust the positioning for the arrow to show up on the desired side, make the following tweaks:

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

.arrow_left,
.arrow_right
{
display:            inline-block; /* for side-by-side placement */
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 its 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 3

Answer №2

The arrow on the left cannot have a transparent appearance, as it is actually created by applying a solid border to a quarter of a box.

(Check out this informative article on how the css triangle effect is produced.)

To achieve the desired look, you may need to consider using images or adjusting the graphic design accordingly.

Answer 4

The arrow on the left cannot have a transparent appearance, as it is actually created by applying a solid border to a quarter of a box.

(Check out this informative article on how the css triangle effect is produced.)

To achieve the desired look, you may need to consider using images or adjusting the graphic design accordingly.

Answer 5

Answer №3

Attempting to use borders to create a transparent triangle has proven unsuccessful. Let's explore alternative methods to achieve our desired outcome. I have devised a simple demonstration - any triangle can be formed by connecting 2 lines (basic trigonometry knowledge required.) http://codepen.io/anon/pen/PPbxEQ - I utilized some variables in CSS and incorporated stylus for better readability of the source code rather than focusing solely on the compiled result. We introduce a pseudo element for the initial icon, rotate it, adjust its height, and then alter the transform origin. It is a straightforward process.

We make adjustments to the angle and recalculate the cosine of the 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); 
}
.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 6

Attempting to use borders to create a transparent triangle has proven unsuccessful. Let's explore alternative methods to achieve our desired outcome. I have devised a simple demonstration - any triangle can be formed by connecting 2 lines (basic trigonometry knowledge required.) http://codepen.io/anon/pen/PPbxEQ - I utilized some variables in CSS and incorporated stylus for better readability of the source code rather than focusing solely on the compiled result. We introduce a pseudo element for the initial icon, rotate it, adjust its height, and then alter the transform origin. It is a straightforward process.

We make adjustments to the angle and recalculate the cosine of the 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); 
}
.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>

What is the best way to make this CSS arrow see-through?

Answer №1

Answer №2

Answer №3

Similar questions

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

The inner DIV cannot be accessed using document.getElementById due to its limited scope

Incorporate a vertical scrollbar in the tbody while keeping the thead fixed for smooth vertical scrolling

Interactive Dropdown-Buttons dynamically inserted

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

Adjust the CSS styling for a newly added row in a JavaFX TableView

What is the best way to incorporate a jQuery script to make an engaging slideshow on my website?

Conceal elements with a single click of a button

Perform Addition of Two Input Values Automatically without the need for any manual clicking of buttons

Error encountered in loop for concatenating html elements: identifier unexpectedly found (jquery + html + php)

How can I make my opacity change on hover without the need for JavaScript?

Do you think my approach is foolproof against XSS attacks?

Is it possible to refresh resources in Node.js without the need to restart the server?

Navigate to the homepage section using a smooth jQuery animation

Extracting CSS from a cell in a Datatable and applying it to other cells within the table

Issue with Jquery addClass method in Firefox

Enhancing design precision from Figma to flawless pixels

Error: The PDFJS variable is not recognized when trying to load a PDF file

What is the best way to initially hide a div using slide toggle and then reveal it upon clicking?

Fixed Positioning Div to Stay at the Top while Scrolling