На данный вопрос уже ответили:
Как в CSS сделать фон со стрелкой-разделителем
1 ответ
Подскажите пожалуйста, как сделать стрелку вправо, как на картинке?
Ответ
Вариант 1
div{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-size: 40px;
background: #FF6A50;
}
div:after{
content: '';
position: absolute; top: 50%; left: 100%;
margin-top: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #FF6A50;
}
D
Вариант 2
div{ position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; text-align: center; color: #fff; font-size: 40px; background: #FF6A50; } div:after{ content: ''; position: absolute; top: 50%; right: -15px; margin-top: -15px; width: 30px; height: 30px; background: #FF6A50; -webkit-transform: rotate(45deg); transform: rotate(45deg); } div > span{ position: relative; z-index: 1; }
D
Вариант 3
div{ position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; text-align: center; color: #fff; font-size: 40px; background: #FF6A50; } div:after{ content: ''; position: absolute; top: 50%; left: 100%; margin-top: -20px; width: 20px; height: 40px; background: #FF6A50; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); clip-path: polygon(0 0, 0% 100%, 100% 50%); }
D
Вариант 4
div{ position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; text-align: center; color: #fff; font-size: 40px; background: #FF6A50; } div:after{ content: '\25BA'; position: absolute; top: 50%; right: -30px; color: #FF6A50; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
D
Вариант 5
div{ position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; padding-right: 15px; /*100px-85px=15px*/ text-align: center; color: #fff; font-size: 40px; background: #FF6A50; -webkit-clip-path: polygon(85% 35%, 100% 50%, 85% 65%, 85% 100%, 0 100%, 0 0, 85% 0); clip-path: polygon(85% 35%, 100% 50%, 85% 65%, 85% 100%, 0 100%, 0 0, 85% 0); -webkit-transition: 0.3s; transition: 0.3s; } div:hover{ padding: 0 0 15px 0; background: #008080; -webkit-clip-path: polygon(100% 85%, 65% 85%, 50% 100%, 35% 85%, 0 85%, 0 0, 100% 0); clip-path: polygon(100% 85%, 65% 85%, 50% 100%, 35% 85%, 0 85%, 0 0, 100% 0); }
D
Комментариев нет:
Отправить комментарий