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:

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

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

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

I am interested in implementing a variable to define rows within a <tr> element in an HTML table

:Incorporating active hyperlinks through javascript

Implementing a configuration file into a client-side web application using asynchronous methods

I am adding the main stylesheet to the queue, but for some reason my images are not appearing

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

Height CSS does not conceal side bar hyperlinks

Customizing the width of the JQuery $ui.progressbar by overriding its properties

Dynamic background featuring a tall vertical image

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Transfer the photo and save it to my database

Ways to remove the highlighting from a selected list item using CSS/Javascript

Update the html() function to include any content that has been typed into a

Is there a way to set the background of the first sibling element to blue, but change it when another sibling element is hovered over?

Utilize custom fonts from your local directory within a Vite Vue3 project

Modify the div's visibility based on selected option in the dropdown menu

Combine React 17 with webpack 5 and babel-plugin-react-css-modules, enabling the use of CSS modules with stylename functionality

I am facing difficulties displaying Arabic language characters on my HTML code