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

How do I add a triangle at the end of a div with opacity 0.2? – Html

result

I want it to turn out like this, but unfortunately my triangle goes into the background of the next stage. I spent 3 hours on it. Help please

https://stackblitz.com/edit/angular-3llbmq?file=src/components/sales-funnel/sales-funnel.component.html

Tags:

3

Answers


  1. 0

    This can easily be achieved with the use of ::before and ::after pseudo-elements – with one providing the background of the ‘next step’ and one providing the triangle with the ‘current step’ bg color.

    Not sure if you neeed a elements in the lis – so I just did straight li’s but it would not be hard to change the styling for the use of a elements.

    Its best not to try to to use opacity for the step differences – its more accessible to use hex codes directly rather than the one hex code with different opacity values.

    Note that the solution of preventing the bleeding color is to space the li’s apart with margin and to use the before / after pseudo-elements to fill the gaps – its better to do this than overlap the element over he next step to prevent issues with clicking on areas that are covered by the triangles

    ul {
   display: flex;
   list-style: none;
   padding: 0;
   border: solid 1px #d4d4d4;
   background: lemonChiffon
 }
 
li {
  font-size: 16px;
  line-height: 20px;
  margin-right: 16px;
  padding: 4px 32px 4px 8px;
  position: relative;
}


.visited {
  background: #AFD954;
  color: #fff;
}

.visited::before {
  content: '';
  width: 16px; 
  height: 28px; 
  z-index: 5;
  position: absolute;
  top: 0;
  right:-16px;
  background: #9BCE29
}

.visited::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid #AFD954;
  position: absolute;
  right:-14px;
  z-index: 9;
  top: 0
}

.active {
  background: #9BCE29;
  color: #fff
}

.active::before {
  content: '';
  width: 16px; 
  height: 28px; 
  z-index: 5;
  position: absolute;
  top: 0;
  right:-16px;
  background: lemonChiffon
}

.active::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid #9BCE29 ;
  position: absolute;
  right:-14px;
  z-index: 9;
  top: 0
}

.not-visited {
  background: lemonChiffon
}
    <ul>
  <li class="visited">New Deal</li>
  <li class="active">Contact</li>
  <li class="not-visited">Qualified</li>

</ul>
    Login or Signup to reply.
  2. 0

    Here it is done with polygon, adapt colors yourself

    div.container {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: black;
  width: 100%;
}

div.tangle {
  height: 50px;
  width: 200px;
  clip-path: polygon(0% 20%,
                  60% 20%,
                  95% 20%,
                 100% 50%,
                  95% 80%,
                  60% 80%,
                   0% 80%);
}

div.tangle:nth-child(1) {
  background:lightgreen;
  transform: translateX(20px);
  z-index:3;
}
div.tangle:nth-child(2) {
  background:green;
  transform: translateX(10px);
}
div.normal {
  height: 30px;
  width: 200px;
  background: white;
}
    <div class="container">
  <div class="tangle"></div>
  <div class="tangle"></div>
  <div class="normal"></div>
</div>
    Login or Signup to reply.
  3. 0

    I had edited your stackbliz example. Please note the HTML and CSS changes.

    Don’t use opacity to lighten the color. Instead, use SCSS lighten and darken methods.

    Please utilize the most of the CSS than the HTML part for the assigning styles. Utilize the classes you have.

    NOTE: Please take the benefit of SCSS variables, nesting and pre-defined methods.

    Added the reverse z-index to stack the previous element to place over next element.

    Below 6 is the total elements

    [ngStyle]="{
 zIndex: 6 - i
}"

    https://stackblitz.com/edit/angular-jhk6qf?file=src/components/sales-funnel/sales-funnel.component.scss

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search