Add an arrow or triangle at the tip of the line

I am currently working on recreating the design of lines with an arrow or triangle at the end side of an Input form. The inspiration for this comes from an old flash application that is now being converted to HTML5: https://i.sstatic.net/OCpif.jpg

So far, I have managed to create the lines around the input field similar to this:

https://i.sstatic.net/XagvB.jpg

HTML

<form action="">
    <div class="line">
        <label>Cab Width = 
            <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches)
        </label>
    </div>
</form>

CSS

.line {
  display: flex;
  flex: 1;
  width: 100%;
  margin: 20px auto;
  line-height: 1em;
}
.line:before, .line:after {
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(black, black);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

However, I'm struggling to find a way to incorporate a CSS triangle or arrow at the end of these lines. It's proving to be quite challenging.

If anyone has any suggestions or advice on how I could tackle this issue, it would be greatly appreciated.

csshtml

Answer №1

Your solution was almost there, but the issue arose when trying to use :after:after for adding the arrows. Here is a different approach that I took:

Instead of using :after:after, I created two separate line spans and added the arrows to each end using :after.

.line-container {
  display: flex;
  width: 100%;
  margin: 20px auto;
  align-items: center;
}

.line {
  flex-grow: 1;
  height: 1px;
  background: black;
  position: relative;
}

.line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -10px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

.line.arrow-left:after {
  position: absolute;
  content: '';
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

label {
  margin: 0 15px;
}
<form action="">
  <div class="line-container">
    <span class="line arrow-left"></span>
    <label>Cab Width =
      <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches)
    </label>
    <span class="line arrow-right"></span>
  </div>
</form>

Answer №2

When utilizing Bootstrap, you have access to a selection of Glyphicons for free, including various arrow classes.

http://getbootstrap.com/components/

You can easily link in Bootstrap from their Content Delivery Network (CDN).

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

If you do not require the JavaScript components, simply link to the bootstrap.min.css file mentioned above and skip the optional theme and JavaScript.

Add the desired glyphicon by applying the appropriate class to an empty span element. Refer to the available icons on the official site.

<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>

To include these using CSS to an existing element, utilize the :after syntax and find the corresponding code in the Bootstrap css file for the icon you wish to use. For instance, for the examples given:

glyphicon-chevron-right

:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

glyphicon-chevron-left

:after {
    font-family: 'Glyphicons Halflings';
    content: "\ e079";
}

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

Tips for effectively passing a parameter in @url.Action

I stumbled upon this piece of code: <button type="button" class="btn btn-inverse btn-danger" onclick="@("window.location.href='" + @Url.Action("ActionName", "ControllerName") +"'");"> Link </button> for redirecting- it works gre ...

jqueryhtmlasp.net-mvcrazor

Can we incorporate the radix-ui/colors variables into a CSS module file?

For my personal project, I am incorporating Radix components alongside radix-ui/colors. However, when attempting to import color variables into the CSS Module, I encountered an error. It seems that using the :root selector in the _app file is necessary, as ...

cssnext.jsimportbundleradix

Deleting a particular tag with regular expressions: a step-by-step guide

I'm attempting to remove a ul tag along with any nested tags inside it. <ul class="related"> <li><a href="/related-1.html" target="_blank">Related article</a></li> <li><a href="/related-2.html" target="_blank"&g ...

phphtmlregex

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

javascripthtmlcss

Import data into Bootstrap table from an external source

I am having trouble styling the table loaded from the table.html file onto the index page. Even after loading the table, the styles from bootstrap classes are not applied. What could be causing this issue? Importing bootstrap libraries directly into the ta ...

javascripthtmljquerybootstrap-5bootstrap-table

Issues with button padding in Firefox and Opera

Having an issue with the alignment of my buttons in HTML. In Opera, the button appears centered vertically, but in Firefox it seems like the text is slightly lower, messing up the design of my website. Below is the HTML code for the button: <input ty ...

htmlcss

What could be causing these cards to not show up correctly?

I am currently incorporating Angular Material's cards in a material grid. Here is the code snippet that I am working with: http://codepen.io/anon/pen/YWwwvZ The issue at hand is that the top row of images extends off the screen at the top, and the b ...

cssangularjsangular-material

When using Angular 5's ngModel, the user interface displays the updated value dynamically without requiring the

When filling out my form, I encounter an issue with a select element and a bind variable. If I make a change to the value and save it, everything works as expected. However, if I make a change in a modal window but then close the modal without saving the v ...

htmlangulartypescript

Google Bar Graphs Cannot Display Decimal Values

Having an issue with my bar chart from Google Chart not displaying float numbers. Other types of bar charts provided by Google Chart work fine, but this specific type doesn't show the float numbers. Here is the code I have written: http://jsfiddle.ne ...

javascriptcsscharts

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

htmlcssangulartypescript

Trouble loading antd's less styles

In my NextJs project, I have the following file structure: -pages -_app.tsx -app -styles -antdstyles.less Within _app.tsx, I am attempting to import @styles/andstyles.less, which simply imports antd styles like this: @import '~antd/di ...

cssreactjsnext.jslessantd

Error: "$$" not defined in this context

I am currently working on generating a dynamic pie chart programmatically with the intention of transforming it into a reusable React Component. The main idea is to have an interactive pie chart where each slice expands into a full pie when clicked. I came ...

javascriptjquerycsssvg

Displaying the error message "No results found" in PHP AJAX live search with multiple values is not possible

I recently went through a tutorial on Most of it worked smoothly after setting it up on my local machine. However, I encountered an issue when searching for data not present in my database. I expected to receive an error message stating "No result found o ...

javascriptphphtmlmysqlajax

Enhancing Image Quality in Microsoft Edge

I'm trying to figure out how to make an image scale with bicubic in MS Edge. Is there a CSS solution or something similar that can change this behavior? Check out this page: On the right side of the page, there are two images with textured backgroun ...

cssmicrosoft-edge

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below: My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); $table.find("th").each(functio ...

jquerycsshtml-tablecellhighlight

What steps can I take to modify this script in order to display one image on top of another?

I am working on a script that creates cross fades for images. However, I have some text images that I would like to appear as fading in on each image transition. This means that when the first image appears, it will pause, then the text image will fade i ...

jqueryhtmlfadein

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

javascripthtmlangularjsregex

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

Having trouble creating multiple PDFs with mPDF without having to store them on the server

I am creating several PDF files in a loop using the mPDF library. Here is a snippet of my code: for($i=0;$i<=3;$i++) { $mpdf = new mPDF(); $stylesheet = file_get_contents('style.css'); $mpdf->WriteHTML($stylesheet,1); $mpd ...

phphtmlmpdf

Parallax scrolling in all directions

Is there a resource available for learning how to program a website similar to the one at ? I am familiar with parallax but can't seem to find any examples that resemble what they have done on that site. ...

javascripthtmlcssparallax