Creating an adaptable CSS triangle for an image

Is there a way to create a responsive triangle on an image that resizes properly and stays aligned? I'm currently having issues with it becoming misaligned. How can this be resolved?

        .image {
            width: 100%;
        }

        .image:after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #f5f5f5;
            position: absolute;
            left: 45%;
            top: 63%;
            transform: translatex(-50%);
            /** making it horizontally center **/
        }

<div class="image">
     <img src="img/frankie.png" class="img-fluid">
</div>
htmlcssimagebootstrap-4css-shapes

Answer №1

Begin by adding position:relative to the parent element (in this example, .image) using Bootstrap position utilities

Next, apply Bootstrap 4 classes such as w-100 to the .image/img

View the code on JSFiddle

.image:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #f5f5f5;
  position: absolute;
  left: 45%;
  top: 63%;
  transform: translatex(-50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="image w-100 position-relative">
   <img src="https://i.sstatic.net/vdzwt.jpg" class="img-fluid  w-100">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

.click function failing to trigger on dynamically loaded form

I'm facing an issue with a form that displays images from my database. After retrieving the filepaths, they are loaded dynamically into the form along with a "Delete" <button> for users to delete the image via AJAX. Although I can successfully ...

javascriptphpjqueryhtmlajax

Do you have any tips on incorporating a sinking hover effect to an image or link?

Custom Arrow Icon I Want to Add Animation To I have designed an arrow icon image that functions as a link. It is positioned on top of a background image. When the user hovers over the arrow, I would like to implement a "sink" effect similar to the example ...

htmlcss

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

jquerycsskeyvaluepair

Rows in the table are not extending to their full length

I'm having an issue with my Bootstrap table design. I have 8 header cells and 5 body cells, but the rows are only stretching across 4 columns. I've hit a blank trying to figure out why. <script src="https://cdnjs.cloudflare.com/ajax/libs/jq ...

htmlhtml-table

Browser resize affects the overlap of DIVs

I've seen similar posts before, but I believe the issue with my website (***) is unique. At full size, the website looks exactly how I want it to. However, when I resize the browser window, the text ("ABOUT INTERNATIONAL PARK OF COMMERCE.." and below ...

htmlcsswordpressoverlap

Challenges with implementing @Html.EditorForModel

Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...

cssasp.netrazorhtml-helperasp.net-mvc-5

What is the best way to detect a checkbox click event inside a nested container?

I've created a list of divs, each with a corresponding pair containing more details. When you click on the "intro" div, the detailed pair opens and the intro is hidden. Each div also has a checkbox. I encountered an issue where clicking the checkbox i ...

jqueryhtmlcheckbox

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...

jqueryhtmlcssgoogle-chrometwitter-bootstrap

Instructions for receiving user input and displaying it on the screen, as well as allowing others with access to the URL to view the shared input provided by the original user

<h1>Lalan</h1> <input type="text" name="text" id="text" maxlength="12"> <label for="text"> Please enter your name here</label> <br><input type="submit" value ...

javascripthtmlinputinputstream

Creating a static line or separator based on the content using HTML and CSS

Is there a way to adjust the height of a line or divider based on the content of either the left or right section? For instance, if we have a left panel and a right panel, and we draw a line or divider on the left side panel, is it possible for the line ...

htmlcss

Picture placed outside div within infobubble

I'm currently working with Google Maps to display an InfoWindow using the InfoBubble library. The issue I'm encountering is that when I try to show an image outside of a div using CSS properties, only half of the image displays within the div. B ...

htmlcssgoogle-maps-api-3infowindowinfobubble

When scrolling, use the .scrollTop() function which includes a conditional statement that

As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code: $(window).scroll(function(){ var $header = $('#header'); var $st = $(this).scrollTop(); console.log($st); if ($st < 250) { ...

javascriptjqueryhtmlcsshover

Click on the link to access and activate the function

Currently, I am retrieving values from a text input field. Using jQuery: $('.submitLocation').click(function(){ // grabbing value from the input field var city = $(".city").val(); }); For HTML: <input type="text" name="city" class ...

jqueryhtml

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

Looking for a seamless solution to render rounded corners on browsers that do not support CSS3 without the delay typically seen with JQuery plugins. The use of .htc files with www.css3pie.com seems like the best option so far, but there is still a delay c ...

jqueryinternet-explorercss

How can I omit spaces in the HTML output when saving a data frame using to_html?

After using the to_html method, I noticed that there are \n after > and spaces before <. Is there a way to prevent them from being saved? Here is an example of what I have: <table border="1" class="dataframe"> <t ...

pythonhtmlpandasdataframe

Create a variety of charts using the same data object in Highcharts

Is it possible to display two (or three) different charts on the same page using Highcharts without creating separate div elements and only utilizing one object? I have created a screenshot to illustrate my question: You can view the code example on JSFi ...

javascripthtmlhighcharts

unable to decrease the dimensions of the image within the next/image component

Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...

cssreactjsnext.jstailwind-css

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

javascriptphpjqueryhtmlajax

What could be causing the search function of the datatable to be hidden?

I am experiencing some difficulties with the code I have. My goal is to incorporate search functionality and pagination into my table. Unfortunately, it does not seem to be working as expected. Below is a snippet of the script located in the header section ...

htmljqueryhtml-tabledatatables