Can someone help me figure out how to create an arrow similar to the one in this button using CSS?
https://i.sstatic.net/gQi0l.png
I've been able to create triangle-like arrows like the one below
#triangle_arrow {
top: 3pt;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid black;
border-top: 0.1em solid black;
transform: rotate(45deg);
}
However, I'm struggling with creating a line towards the arrow's corner! Any suggestions?
Luckily for you, there is a solution in the form of the → HTML entity, which eliminates the need to deal with CSS triangles. Instead, you can easily incorporate the use of content within a pseudo-element:
button {
background: #0898b8;
border: 1px solid #0898b8;
color: white;
line-height: 24px;
padding: 6px 12px;
}
span::after {
content: '→';
font-size: 18px;
margin-left: 4px;
}<button>
<span>Next</span>
</button>There is a different approach you can take to achieve this as suggested by James. You have the option to use pseudo selectors or predefined icons from font awesome to add an arrow icon next to a specific tag, demonstrated below.
Alternative Solution:
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box:before{
top: 20px;
right:10px;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid white;
border-top: 0.1em solid white;
transform: rotate(45deg);
position:absolute;
}
#box > p:after{
content:'';
width:20px;
height:1px;
background:white;
right:10px;
top:24px;
position:absolute;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}<div id="box">
<p>Next</p>
</div>Another Solution :
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
#box > p > .fa{
color:#fff;
font-size:16px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>Check out this CSS-only arrow that can be resized. Click here to view
<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>
.css-arrow {
position: relative;
zoom: 1;
&:before {
box-sizing: border-box;
content: "";
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1px;
bottom: 0;
width: 1px;
background: #000;
zoom: 2;
}
&:after {
box-sizing: content-box;
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 57%;
height: 0;
padding-bottom: 57%;
border: 1px solid #000;
border-width: 1px 0 0 1px;
transform: translate(0, 0) rotate(45deg);
transform-origin: 0% 0%;
border-radius: 0;
zoom: 2;
}
&.right {
transform: rotate(90deg);
}
&.bottom {
transform: rotate(180deg);
}
&.left {
transform: rotate(270deg);
}
}
Currently, I am utilizing Visual Studio Code on a Mac for writing AngularJS style HTML. Whenever I try to include an inline expression for a CSS value, I encounter an irritating red Intellisense error, as displayed in the screenshot provided below. It is w ...
I successfully incorporated the svg logo into my webpage using the Next.js Image tag. import Image from "next/Image" export default function Home() { return ( <div> <Image width={32} height={32} src="/logo.svg"> ...
Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...
In my application, I am utilizing the MEAN stack with AngularJS as the front-end. I am trying to figure out how to calculate the total sum and include comma values. I have managed to get the total sum value, but the comma value is not being calculated prop ...
I recently came across some code online that I'm trying to modify in order to add an expanding button next to a web part on my Sharepoint site. However, the problem is that by default, all web parts are already expanded and require a click to collapse ...
Is there a way to use an image as the border for my div elements? The key requirement is that the border must be positioned outside the box without affecting its size. It's important to note that all div items have the same width, but varying heights ...
I am currently working on a website project for a local charity organization, and I am encountering technical issues with compatibility in IE7. The website functions perfectly in all other browsers I have tested, and it even passes the validation process o ...
Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...
My table is created using a struts2 iterator and has variable length and content. It looks something like this: <table> <tr class="odd" machineId="1" parameterId="1"><td></td></tr> <tr class="even" machineId="1" pa ...
Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...
I am currently working on setting the left property of a class based on the id of a li tag. The li tags are being dynamically generated as shown below: .js var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; ...
Currently, I am working on creating a checkers game using HTML and CSS with the inclusion of CSS Flexbox and CSS Grid for layout design. However, I have encountered an issue where the page is not responsive vertically. When resizing the browser height in C ...
I'm working on a mobile layout design for my css project. My goal is to have the header and footer remain fixed on the screen while allowing users to scroll through the content in between. I was able to achieve the fixed positioning, but now none of m ...
I'm planning to use distinctive data attributes with a prefix like "data-mo-". Let's say I have the following elements: <span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</ ...
Unfortunately, the issue with a:focus not working in IE is still unresolved. I have been searching for a solution, but have not been able to find one yet. <div class="city-selection"> <ul> ...
It's driving me a bit crazy as I'm not sure where I've gone wrong. I'm currently working with NextJS and have loaded this font into my <Link />. While it displays perfectly on Chrome and Safari in the iOS simulator, it fails to l ...
My attempt to create this HTML file in Chrome posed some challenges: <style> br { } [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...
I'm struggling to evenly space four child containers within a single parent container without using Flex/Grid, as I haven't covered those topics yet. I tried setting each child container to 25% width of the parent and centering them with text-ali ...
As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...
Why does the first element get pushed down when its child contains text? What causes inline-block to behave this way? Is there a way to align divs side-by-side while still allowing them to have children? For example, I want the grey box to contain a list ...