Create a triangular shape to fit on the right side of a 'li' element

Question

Create a triangular shape to fit on the right side of a 'li' element

After defining the following HTML:

<ul class="steps d-flex">
   <li class="step">Basic Details<div class="triangle triangle-right"></div></li>
</ul>

With this given CSS:

.steps li {
    @extend .text-center;
    position: relative;
    overflow: hidden;
    flex: 1 1;
    align-items: center;
    justify-content: center;
    background: $grey-600;
}

The current appearance is like this:

https://i.sstatic.net/rrtix.png

I aim to create a triangle pointing towards the right of the div, similar to this setup:

https://i.sstatic.net/tdOXy.png

Note how the payment section has a triangle that seems to be indicating 'done'

How can I achieve this effect?

html css sass bootstrap-5

Answer 1

Answer №1

Building a breadcrumb or steps-progress component using CSS is easily achievable with the clip-path property and CSS calc() function. In this example, I utilize a CSS variable --s to define the size of the arrow according to your preference:

/*QuickReset™*/ * { margin: 0; box-sizing: border-box; }
body { font: 1rem/1.4 sans-serif; }

/* STEPS COMPONENT */

.steps {
  --s: 2rem; /* size of the arrow */
  display: flex;
}

.steps > * {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 1.4rem;
  background: #ddd;
  padding: 1.5rem 1rem;
  /* Arrow shape */
  clip-path: polygon(0% 0%, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%, calc(0% + var(--s)) 50%);
  margin-left: calc(var(--s) * -0.7);
}

.steps > :first-child {
  clip-path: polygon(0% 0%, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%);
  margin-left: 0;
}

.steps > :last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, var(--s) 50%);
}

.steps .is-active { background: #0bf; }

<nav class="steps">
  <a href="">Details</a>
  <a href="" class="is-active">Payment</a>
  <a href="">Done</a>
</nav>

Answer 2

Building a breadcrumb or steps-progress component using CSS is easily achievable with the clip-path property and CSS calc() function. In this example, I utilize a CSS variable --s to define the size of the arrow according to your preference:

/*QuickReset™*/ * { margin: 0; box-sizing: border-box; }
body { font: 1rem/1.4 sans-serif; }

/* STEPS COMPONENT */

.steps {
  --s: 2rem; /* size of the arrow */
  display: flex;
}

.steps > * {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 1.4rem;
  background: #ddd;
  padding: 1.5rem 1rem;
  /* Arrow shape */
  clip-path: polygon(0% 0%, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%, calc(0% + var(--s)) 50%);
  margin-left: calc(var(--s) * -0.7);
}

.steps > :first-child {
  clip-path: polygon(0% 0%, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%);
  margin-left: 0;
}

.steps > :last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, var(--s) 50%);
}

.steps .is-active { background: #0bf; }

<nav class="steps">
  <a href="">Details</a>
  <a href="" class="is-active">Payment</a>
  <a href="">Done</a>
</nav>

Answer 3

Answer №2

To start, the creation of a chevron element is necessary. Utilizing CSS is a simple method to achieve this task. Once created, it can be incorporated into your project.

My recommendation is to utilize the flexbox technology as it offers a more efficient and stylish approach to solving these types of challenges.

Below is an illustration pertaining to your inquiry.

.chevron-right {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(5.5);
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px
}

.chevron-right::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  right: 8px;
  top: 4px;
  color: white;
}

.container {
  font-size: 30px;
  display: flex;
  flex-direction: row;
  background-color: lightgrey;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.payment {
  margin-left: 20px;
  margin-right: 20px;
}

.done {
  margin-left: 20px;
  margin-right: 20px;
}

<div class="container">
  <div class="payment">Payment</div>
  <i class="chevron-right"></i>
  <div class="done">Done</div>
</div>

Answer 4

To start, the creation of a chevron element is necessary. Utilizing CSS is a simple method to achieve this task. Once created, it can be incorporated into your project.

My recommendation is to utilize the flexbox technology as it offers a more efficient and stylish approach to solving these types of challenges.

Below is an illustration pertaining to your inquiry.

.chevron-right {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(5.5);
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px
}

.chevron-right::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  right: 8px;
  top: 4px;
  color: white;
}

.container {
  font-size: 30px;
  display: flex;
  flex-direction: row;
  background-color: lightgrey;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.payment {
  margin-left: 20px;
  margin-right: 20px;
}

.done {
  margin-left: 20px;
  margin-right: 20px;
}

<div class="container">
  <div class="payment">Payment</div>
  <i class="chevron-right"></i>
  <div class="done">Done</div>
</div>

Answer 5

Answer №3

Looking at the HTML and CSS you've provided, it seems like you're attempting to create a triangle using a div that has the class of "triangle-right". To achieve this right-pointing triangle effect, you can utilize either the ::before or ::after pseudo-elements along with the border technique to shape the triangle. Follow these steps:

.triangle-right::before {
    content: '';
    position: absolute;
    top: 50%;  /* centers the triangle vertically */
    left: 100%;  /* positions the triangle to the right of its containing 
div */
    width: 0; 
    height: 0;
    border-top: 10px solid transparent;  /* adjust size as necessary */
    border-bottom: 10px solid transparent;  /* adjust size as necessary */
    border-left: 10px solid $grey-600;  /* customize size and color as 
necessary */
    transform: translateY(-50%);  /* perfects the vertical centering 
*/
}

By applying this CSS code, your triangle will point towards the right side and be displayed on the right edge of the element with the class of "triangle-right". Modify the border dimensions accordingly to alter the triangle's size.

Answer 6

Looking at the HTML and CSS you've provided, it seems like you're attempting to create a triangle using a div that has the class of "triangle-right". To achieve this right-pointing triangle effect, you can utilize either the ::before or ::after pseudo-elements along with the border technique to shape the triangle. Follow these steps:

.triangle-right::before {
    content: '';
    position: absolute;
    top: 50%;  /* centers the triangle vertically */
    left: 100%;  /* positions the triangle to the right of its containing 
div */
    width: 0; 
    height: 0;
    border-top: 10px solid transparent;  /* adjust size as necessary */
    border-bottom: 10px solid transparent;  /* adjust size as necessary */
    border-left: 10px solid $grey-600;  /* customize size and color as 
necessary */
    transform: translateY(-50%);  /* perfects the vertical centering 
*/
}

By applying this CSS code, your triangle will point towards the right side and be displayed on the right edge of the element with the class of "triangle-right". Modify the border dimensions accordingly to alter the triangle's size.

Create a triangular shape to fit on the right side of a 'li' element

Answer №1

Answer №2

Answer №3

Similar questions

Unusual SVG Cubic Bezier Animation Transforming Curves into Points and Lines

Problem with Silverstripe: Replicating Site configuration or settings menu

Change the font style of individual characters within a string using CSS or JavaScript, instead of applying it to the entire

What could be the reason for my new course not being recognized?

Aligning text and lists using Bootstrap on both desktop and mobile devices

Tips for maintaining consistent formatting of a div element across various sizes

How can I dynamically change the orderBy parameter based on conditions in an Angular application?

"Unlock the secrets to commanding respect in the web form layout by mastering the art

I'm looking to center my btn button vertically and horizontally over two images using Bootstrap 5 in a responsive manner. How can I achieve this?

Steps for Removing Multiple CSS Styles from an Element's Style:

Having trouble making an HTML5 video work on Android? It seems to play fine when clicking the play button,

I'm having trouble modifying the border color of a TableCell component in material-ui

Issue with Flex display not being applied within Material UI Grid Item

Adjusting height in CSS can be done dynamically based on the content within

Having four videos displayed on one webpage can cause the browser to function at a slower

Using node appendChild() in HTML for animating elements

How to Retrieve Checkbox Values from Multiple Rows Using JavaScript

Aligning SVG shapes within each other

Disabling autocomplete in the DOCTYPE HTML tag in Visual Studio Code prevents it from appearing when

The minimum height increases as the inner divs expand