How to make arrow in css - Arrow in css

Опубликовано: 15 Декабрь 2021
на канале: Masters In Web Design

How to make arrow in css.

/*CSS*/
body{
padding: 0;
margin: 0;
background-color: #F1F1F1;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-container{
width: 260px;
height: 400px;
background-color: #D1D1D1;
position: relative;
border-top: 3px solid #FF4545;
}
.arrow-container::before{
content: '';
position: absolute;
top: -23px;
left: 50%;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FF4545;
border-left: 10px solid transparent;
}
.arrow-container::after{
content: '';
position: absolute;
top: -16px;
left: 50.8%;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #D1D1D1;
border-left: 8px solid transparent;
}

Смотрите видео How to make arrow in css - Arrow in css онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Masters In Web Design 15 Декабрь 2021. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 5 раз и оно понравилось 1 посетителям.

8,024

180