Div containing white CSS arrow

Question

Div containing white CSS arrow

Is there a way to create a white arrow inside an image using only CSS, without changing any of the HTML code? Here's the snippet with the HTML:

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

.foto {
                width: 100%;
                float: left;
                min-height: 215px;
                background:
                linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
            }

<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>

css linear-gradients

Answer 1

Answer №1

For those not needing to support Edge, using the clip-path is the simplest solution to the problem at hand. To check browser support, visit CanIUse

An incredibly useful tool for this task is Clippy. For more information on this technique, refer to MDN - CSS clip-path.

.foto {
  width: 100%;
  float: left;
  min-height: 215px;

  -webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
  /* Experiment with percentages according to your needs */

SOLUTION 2: An alternative method with better browser support is using CSS shapes.
You can create a white triangle element overlaying the image with the following code:

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red; /* red is just for display purposes */
  border-bottom: 50px solid transparent;
}

<div id="triangle-left"><div>

If you have both a background-image and an img tag in your HTML, choose one to use. If image cropping is a concern, consider adjusting background position or using object-fit.

Answer 2

For those not needing to support Edge, using the clip-path is the simplest solution to the problem at hand. To check browser support, visit CanIUse

An incredibly useful tool for this task is Clippy. For more information on this technique, refer to MDN - CSS clip-path.

.foto {
  width: 100%;
  float: left;
  min-height: 215px;

  -webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
  /* Experiment with percentages according to your needs */

SOLUTION 2: An alternative method with better browser support is using CSS shapes.
You can create a white triangle element overlaying the image with the following code:

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red; /* red is just for display purposes */
  border-bottom: 50px solid transparent;
}

<div id="triangle-left"><div>

If you have both a background-image and an img tag in your HTML, choose one to use. If image cropping is a concern, consider adjusting background position or using object-fit.

Answer 3

Answer №2

If you want to correct your gradient, try swapping the position of the top and bottom layers. Here is how you can do it:

.foto {
    min-height: 200px;
    background:
      linear-gradient(to bottom right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
      linear-gradient(to top right,transparent 49.8%,#fff 50%) top right/10% 50%,
        url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
     background-repeat:no-repeat;
}

<div class="foto bg_fix" ></div>

Answer 4

If you want to correct your gradient, try swapping the position of the top and bottom layers. Here is how you can do it:

.foto {
    min-height: 200px;
    background:
      linear-gradient(to bottom right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
      linear-gradient(to top right,transparent 49.8%,#fff 50%) top right/10% 50%,
        url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
     background-repeat:no-repeat;
}

<div class="foto bg_fix" ></div>

Div containing white CSS arrow

Answer №1

Answer №2

Similar questions

Unlimited highway CSS3 motion

Setting up a custom PrimeNG theme to match our unique style is a great way to

Scrolling through four limited list items automatically

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

"Enjoy a full-screen background that adjusts its height while you scroll

Position of Bootstrap glyphicon

sequentially animating elements using animate css in a choreographed manner

Why does Flex-layout create odd gaps in spacing that are not present in Edge?

Tips for halting the scrolling of a div once it reaches a particular point

Guide to selecting all checkboxes on a website using Selenium in Python by implementing a loop

Arranging Page Titles in a Vertical Scroll Layout

Alignment issue detected with the text for radio buttons

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Is there a way to modify a jQuery animation to be positioned in the center of an element?

The AngularJS factory and controller code seem to be failing to generate any output

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

Is there a way to adjust the transparency of an image without affecting any overlaid text while using Bootstrap's carousel feature?

Transitioning backgrounds in a slideshow

Content in the Bootstrap carousel vanishes without warning after a period of time

Curved edges on a text box featuring a scroll bar