Question 261746 in Html Question posted in
Some basic documentation can be found here.

Html – Make right side of li a triangle

I have the following HTML defined:

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

With the following CSS:

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

It looks like this:

enter image description here

I’d like to have a triangle pointing to the right of the div like so:

enter image description here

Notice how payment has a triangle that looks like it’s pointing to ‘done’

How do I do this?

Tags:

2

Answers


  1. 0

    Given your provided HTML and CSS, it looks like you’re trying to create a triangle using a div with a class of triangle-right. To make this triangle point to the right, you can use the ::before or ::after pseudo-element, coupled with the border trick to form the triangle. Here’s how you can do it:

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

    With this CSS, the triangle will point to the right and will appear on the right side of the with the class triangle-right. Adjust the border sizes as needed to change the size of the triangle.

    Login or Signup to reply.
  2. 0

    First, you need to create a chevron element. An easy way to do it using CSS. After that you can implement it to your example.

    I suggest you to use flexbox technology, it’s much easier and elegant way to complete these kind of tasks.

    Here is an example of your question.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search