Create DIV Boxes with Arrows and Pointers, using CSS

Publicado el: 30 enero 2015
en el canal de: Arjun Khara

59,659

CSS is used to create boxes with arrows that point towards content. These are often used as tooltips and quick instructions that pop up to guide you along a website. This tutorial shows how to create these divs with arrows, and the logic behind the CSS code. Here's the code block used in this tutorial:

//The main box
.arrowBox{
width: 200px;
height: 30px;
background-color: #ffc728;
border-radius: 5px;
position: fixed;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
text-align: center;
}

//The arrow pointer
.arrowBox:after{
content: ' ';
width: 0px;
height: 0px;
border-top: 10px solid #ffc728;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
position: absolute;
left: 50%;
top: 100%;
margin-left: -10px;
}

Background music by: YouTube Free Music (End of Summer, and Pas de Deux)

En esta página del sitio puede ver el video en línea Create DIV Boxes with Arrows and Pointers, using CSS de Duración hora minuto segunda en buena calidad , que subió el usuario Arjun Khara 30 enero 2015, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 59,659 veces y le gustó 1 mil a los espectadores. Disfruta viendo!

2,660