How to make div with arrow?

Question

How to make div with arrow?

Navigation

#1 by (1 votes)

0

I'm grateful if someone can show you how to make these div's that stay on the globe with a small "arrow" pointing to the item that the user is browsing, using only HTML and CSS
Here's the sample image:

html5 css3

asked by anonymous 09.07.2017 / 21:34

1 answer

Pass data between fragments and Activitys with radio button Question form with radio button returning showing empty

score 1 · Accepted Answer

*{
 padding: 0px;
 margin: 0px;
}
body{
 background-color: lightyellow;
}
#menu{
 position: relative;
 height: 40px;
 width: 300px;
 background-color: lightgreen;
 overflow: visible;
 margin: 50px;
}
#menu > #dropdown{
 position: absolute;
 top: 60px;
 background-color: white;
 box-shadow: 0px 0px 10px #888888;
 display: none;
 width: 300px;
 height: 300px;
}
#menu:hover > #dropdown{
 display: block;
}
#menu > #dropdown > span{
 position: relative;
 margin: 20px;
 clear: both;
 display: block;
}
#menu > #dropdown > #seta{
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 15px;
 border-color: transparent;
 border-bottom-color: white;
 position: relative;
 margin-top: -30px;
 margin-left: 135px;
 clear: both;
}

<div id="menu">Passe o mouse
  <div id="dropdown"><div id="seta"></div><span>Ola</span></div>
</div>