Как добавить треугольник в конце div с непрозрачностью 0,2?
Ответы 3
Этого легко добиться с помощью псевдоэлементов ::before и ::after, один из которых обеспечивает фон «следующего шага», а другой — треугольник с цветом bg «текущего шага».
Не уверен, что вам нужны элементы в lis - поэтому я просто сделал прямые li, но было бы несложно изменить стиль для использования элементов.
Лучше не пытаться использовать непрозрачность для разницы шагов - более доступно использовать шестнадцатеричные коды напрямую, а не один шестнадцатеричный код с разными значениями непрозрачности.
Обратите внимание, что решение для предотвращения кровотечения состоит в том, чтобы разнести li с отступом и использовать псевдоэлементы до/после для заполнения пробелов - лучше сделать это, чем перекрывать элемент на следующем шаге, чтобы предотвратить проблемы с нажатием на участках, покрытых треугольниками
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>Здесь это делается с помощью полигона, цвета адаптируйте сами
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>Используйте clip-path с осторожностью. clip path лучше всего поддерживается браузерами, кроме IE-11
Да, я думаю, это стоит отметить, что
Возможно, вам нужно подумать о clip-path, если пользователь живет в 2019 году, но IE 11 уже почти не используется. Далее, для этого примера, у вас получится прямая линия, которая совсем не нарушает дизайн. Так что "осторожно с clip-path" в данном случае вряд ли применимо.
@tony ur пример нуждается в обновлении с помощью свойства zIndex. если активный элемент 5-й или более . мы можем потерять контекст стека. Укажите ZIndex в обратном порядке в цикле (угловой пример), начиная с длины элементов.
Я отредактировал ваш пример stackbliz. Обратите внимание на изменения HTML и CSS.
Не используйте непрозрачность, чтобы осветлить цвет. Вместо этого используйте методы осветления и затемнения SCSS.
Пожалуйста, используйте большую часть CSS, чем часть HTML для назначения стилей. Используйте классы, которые у вас есть.
ПРИМЕЧАНИЕ. Воспользуйтесь преимуществами переменных SCSS, вложенности и предопределенных методов.
Добавлен обратный z-индекс для размещения предыдущего элемента над следующим элементом.
Ниже 6 - общее количество элементов
[ngStyle] = "{
zIndex: 6 - i
}"
Https://stackblitz.com/edit/angular-jhk6qf?file=src/components/sales-funnel/sales-funnel.component.scss
Просто измените границу: 15px сплошная прозрачная на границу: 15px сплошная белая;;