How to make arrow in css - Arrow in css

Published: 15 December 2021
on channel: 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;
}

Watch video How to make arrow in css - Arrow in css online, duration hours minute second in high quality that is uploaded to the channel Masters In Web Design 15 December 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 5 times and liked it 1 visitors.

653