I'm looking to add a small CSS arrow in the top right corner of an image, similar to this:
Below is the CSS code for the arrow, but I'm having trouble incorporating it into my project.
.cssarrow {
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent blue transparent transparent;
}
Thank you for your assistance!
To start, enclose both the image and arrow within a <div> element like this:
<div class="wrapper">
<img src="http://lorempixel.com/250/200" alt="">
<div class="cssarrow"></div>
</div>
Next, utilize absolute positioning to place the arrow in the top-right corner of the wrapper div:
.wrapper {
position: relative; /* Create a reference point for absolute positioning */
display: inline-block; /* Adjust width based on content */
}
.wrapper img {
vertical-align: middle; /* Eliminate gap below inline-level element */
}
.cssarrow {
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent gold transparent transparent;
position: absolute; /* Remove from normal flow */
top: 0; right: 0; /* Position at top-right corner of the wrapper */
}
Here is an example of how you can utilize the pseudo-class DEMO
<div class="container">
<img src="http://placehold.it/350x150" alt="">
</div>
.container {
position: relative;
display: inline-block;
}
.container:after {
position: absolute;
top: 0; right: 0;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent blue transparent transparent;
}
Give this a shot. See the snippet below for guidance on how to implement it with your own picture
HTML
<div>
<img src='https://i.sstatic.net/YtYMk.jpg' />
<div class='cssarrow'></div>
</div>
CSS
.main {
width:100%
}
.cssarrow {
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent blue transparent transparent;
z-index:100;
position:absolute;
right:0;
}
img {
position:absolute;
width:100%
}
Is there a way to style an input of type checkbox using only CSS, while still keeping the existing label associated with it? <p id="lorem-ipsum"> <label for="dolor-sit-amet">Dolor sit amet</label> <input type="checkbox" id="do ...
I have created a CodePen with a working hover effect using :before & :after on li link options. However, I am looking for a more efficient way to globally apply the position of these pseudo-elements without adding separate styles for each link option. ...
Currently, I am working on implementing a Jquery infinite autoplay multiple carousel. What I have done is created two separate carousel blocks on the same page within the body section. <div class="rotating_block"> <div class="bl ...
Despite all aspects of my simple form and validation working flawlessly, I am facing an issue where 'this' is referencing something unknown to me: $('#contact').validator().submit(function(e){ e.preventDefault(); $.ajax ...
I am trying to customize a Bootstrap 4 accordion by conditional rotating the icon to point up when it is open and back down when closed. I managed to achieve this using CSS, but now I need to implement it conditionally based on active states rather than ev ...
I have been attempting to use a Dojo moveable with a fixed position on the browser window. Unfortunately, whenever I try to move the div using the mouse, the position automatically changes to absolute. Is there a way to keep the div fixed in its position? ...
I am trying to arrange the #inner2 and #inner3 divs to float next to each other while also adjusting to fit perfectly within the #outer div when the browser window size changes. Unfortunately, inner3 is not floating correctly as it should be and is overlap ...
I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...
When using the localStorage property like localStorage.setItem('theme', element);, keep in mind that it does not store the href property of an element such as element.href = '../assets/css/syntax-highlighting/synthwave-84.css';: const l ...
My objective is to implement JavaScript on the server side. To achieve this, I have decided to use node.js as it seems like the most logical solution. While I am quite familiar with node.js from working on applications, I now need to utilize it for server- ...
Looking to create a cool animation where a ball moves along a curved path? Struggling to figure out how to do it with CSS3 since there's no built-in path animation feature? Wondering if it's possible to animate a ball on a curved background? Ca ...
I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...
There is a row consisting of three elements: left, center, and right. However, the problem lies in the fact that the center element is not aligned at the screen level, but rather at the row level. Is there a solution to align this element at the screen l ...
I am having trouble changing the background of a DIV. I believe my code is correct, but it doesn't seem to be working. I suspect the error lies with the URL parameter, as the function works without it. Here is my code: <script language="JavaS ...
I have encountered an issue while using the react-places-autocomplete package. Every time I type something into the input field and suggestions appear, the entire input field jumps up, which disrupts the overall appearance. Is there a way to prevent the ...
I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...
Why do I keep encountering this error message: Uncaught SyntaxError: missing ) after argument list (at bestellen:60:105) This is the HTML code causing the issue: <div class="gerechten"> {% for gerecht in gerechten %} <div ...
My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...
My project aims to showcase three distinct OpenApi definitions within a web application, enabling users to explore different API documentation. The concept involves implementing a toggle button group with three buttons at the top and the Swagger UI display ...
Currently, on the WooCommerce single product page, my product tags are being shown in this format: <span class="tagged_as">All tags: <span class="tagged_as"> <a href="" rel="tag">000</a>, ...