Straightening the border of the final item

In my Angular project, I'm currently implementing a progress bar with the following code:

.bar {
  --d: 1rem;
  /* arrow depth */
  --gap: 0.3rem;
  /* arrow thickness, gap */
  display: flex;
  margin-right: var(--d);
}

.bar-step {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.6rem var(--d);
  margin-right: calc(var(--d) * -1 + var(--gap));
  background: #d9e3f7;
  color: #23468c;
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}

.bar-step:first-child {
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}

.bar-step.active {
  background: #23468c;
  color: #fff;
}
<div class="bar">
  <div class="bar-step active">Step 1</div>
  <div class="bar-step">Step 2 text</div>
  <div class="bar-step">Step 3</div>
  <div class="bar-step">Step 4</div>
</div>

Is there a way to ensure that the right border of the last child matches the left border of the first child in the progress bar?

htmlcssbootstrap-5

Answer №1

Modifying the clip path of the final element as shown below:

.bar {
  --d: 1rem;
  /* arrow depth */
  --gap: 0.3rem;
  /* arrow thickness, gap */
  display: flex;
  margin-right: var(--d);
}

.bar-step {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.6rem var(--d);
  margin-right: calc(var(--d) * -1 + var(--gap));
  background: #d9e3f7;
  color: #23468c;
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}

.bar-step:first-child {
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}

.bar-step:last-child {
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, calc(100% - var(--d)) 0%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%)
}

.bar-step.active {
  background: #23468c;
  color: #fff;
}
<div class="bar">
  <div class="bar-step active">Step 1</div>
  <div class="bar-step">Step 2 text</div>
  <div class="bar-step">Step 3</div>
  <div class="bar-step">Step 4</div>
</div>

Answer №2

UPDATE: I made a mistake earlier which messed things up, here is the corrected clip-path for the last child

.bar {
  --d: 1rem;
  /* arrow depth */
  --gap: 0.3rem;
  /* arrow thickness, gap */
  display: flex;
  margin-right: var(--d);
}

.bar-step {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.6rem var(--d);
  margin-right: calc(var(--d) * -1 + var(--gap));
  background: #d9e3f7;
  color: #23468c;
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}

.bar-step:first-child {
  clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}
.bar-step:last-child  {
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, var(--d) 50%, 0% 0%);
}

.bar-step.active {
  background: #23468c;
  color: #fff;
}
<div class="bar">
  <div class="bar-step active">Step 1</div>
  <div class="bar-step">Step 2 text</div>
  <div class="bar-step">Step 3</div>
  <div class="bar-step">Step 4</div>
</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

Limit pasted content in an Angular contenteditable div

Is there a way to limit the input in a contenteditable div? I am developing my own WYSIWYG editor and want to prevent users from pasting content from external websites and copying styles. I want to achieve the same effect as if the content was pasted into ...

javascripthtmlangulartypescriptwysiwyg

Guide on Generating Dynamic JSON to Set and Retrieve Values for Forms and Displaying the Bound Values

I'm a beginner in Ionic 3 and I'm having trouble creating a page that redirects to another page without validation. I want to display the data on the new page, but it's not working. Please help! I also want to create a dynamic JSON object a ...

javascripthtmlangularionic-framework

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

htmlcssanimation

Creating a Dropdown Menu with an IEnumerable SelectList

I'm encountering an issue when trying to choose an item from my dropdown list and submit it. An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but wasn't handled in user code. Additional informat ...

c#htmlasp.netasp.net-mvc

Leveraging HTML within jQuery UI autocomplete

In the past, I was able to include HTML in the JSON array I used for autocomplete with jQuery UI before version 1.8.4. For example: $row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>'; ...

htmljquery-uiautocompletejquery-ui-autocomplete

Placing a pair of buttons on the border of a div container with the help of the bootstrap grid

Could you please assist me in making these two buttons stick to the edge of the div using bootstrap grid? If possible, could you also provide some explanation? I am currently trying to grasp how bootstrap grid works... Here is my progress so far: https:/ ...

htmlcssbootstrap-4bootstrap-grid

Tips for using JavaScript to set images from Flickr API as img src

I've been attempting to populate a table with images fetched from flickr. The array I'm using consists of urls like: ["https://www.flickr.com/photos/113081696@N07/24695273486", "https://www.flickr.com/photos/113081696@N07/24565358002", "https:// ...

javascripthtmlflickr

Guide to Including Captions and Spans in a Table

In the given HTML code, nested tables are used by the developer which cannot be changed. However, there is a requirement to replace the table class and add a caption and span only to the main table. <table class="two_column_layout" align="center"> & ...

javascriptjqueryhtmljquery-selectorsprepend

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

htmlcssfont-size

Try utilizing querySelectorAll() to target the second item in the list

As I delve into the world of HTML and JS, I came across the document.querySelectorAll() API. It allows me to target document.querySelectorAll('#example-container li:first-child'); to select the first child within a list with the ID 'exampl ...

javascripthtmlcssdom

Personalize PDF display using Bootstrap and CodeIgniter

In my Bootstrap collapse menu, I have the following setup: <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" a ...

htmlcodeignitertwitter-bootstrap-3bootstrap-4codeigniter-3

Displaying JavaScript array contents in an HTML page without using the .innerHTML property

As someone new to the world of JavaScript and web development, I find myself faced with a challenge. I want to showcase the contents of two different JavaScript arrays in an HTML format. However, my research has led me to believe that utilizing .innerHTML ...

javascriptjqueryhtmlarrays

Three column row with a full-width layout now includes a horizontal scrollbar

I currently have a layout with three columns as shown below: <!DOCTYPE html> <html lang="fr"> <head> <title>youpi</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protec ...

htmltwitter-bootstrapbootstrap-5

JQuery Challenge: Solving Dynamic Modal Issues

I'm in the process of creating a webpage that features multiple divs, each with its own unique image and title. Within each div, there's a button that, when clicked, should grab the specific image and title and display them in a modal. However, I ...

javascriptjqueryhtmltwitter-bootstrap

The unique and personalized accordion panel is experiencing technical difficulties

Here is the accordion script I am using: $(document).ready(function(){ $(function(){ // Accordion Panels $(".accordion span").hide(); $(".accordion li").click(function(){ $(this).next(".pane").slideToggle("fast").siblings(".pane:visible").sl ...

phpjqueryhtmlmysql

JavaScript: Launching the current page in a new tab or window

Is it feasible to open a new window or tab from the existing HTML page? Absolutely, I am referring to the current HTML page itself. Not triggered by an external call like this: window.open('page.html', '_blank'); Possible through Jav ...

javascripthtmlinternet-explorer

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

javascripthtmlnode.jsexpress

Implementing an Ajax function for handling multiple button clicks

So, here's the situation - I've inherited a form with two buttons that inexplicably have the same name and id (seriously, don't ask me why, I didn't design this form haha). I'm attempting to utilize the Ajax .click function to trig ...

javascripthtmlajax

Using the symbols '&', '>', and '*' in the styling of React components

Below is the code snippet in question: const useStyles = makeStyles(theme => ({ row: { '& > *': { fontSize: 12, fontWeight: 'bold', color: 'rgba(33,34,34,0.5)', letterSpacing: 0.5, ...

javascriptcssreactjsmaterial-uistyling

Script tag causing browser to send unwanted request

Recently, I received some code from a third-party supplier to implement on certain web pages. This code utilizes the jQuery plugin for jTemplates and looks something like this: <script type="text/html" id="item_template"> {#foreach $T.search.results ...

jqueryhtmljtemplates