Skip to content

Instantly share code, notes, and snippets.

@eugenserbanescu

eugenserbanescu/beak.html

Created June 27, 2018 10:57
Show Gist options
  • Save eugenserbanescu/96a2eaf55c9030fc02f44c2709d359b7 to your computer and use it in GitHub Desktop.
Save eugenserbanescu/96a2eaf55c9030fc02f44c2709d359b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
beak.html
<html>
<head>
<style>
.wrapper {
background: red;
position: relative;
margin: 100px;
width:100px;
height: 100px;
}
.tooltip {
background-color: #dedede;
border: 1px solid orangered;
border-radius: 2px;
position: absolute;
z-index: 1
}
.tooltip.top {
left: -10px;
top: calc(100% + 10px);
}
.tooltip-beak-wrapper {
box-sizing: border-box;
height: 7px;
overflow: hidden;
position: absolute;
padding: 1px;
width: 15px;
}
.tooltip-beak-wrapper.top {
top: -7px;
left: 10px;
}
.tooltip-beak {
background-color: #dedede;
border: 1px solid orangered;
display: block;
height: 11px;
margin: 1px;
transform: rotate(45deg);
transform-origin: center;
width: 11px;
}
</style>
<body>
<div class="wrapper">
<div class="tooltip top">
<span class="tooltip-beak-wrapper top">
<span class="tooltip-beak"></span>
</span>
<p style="color: #3d3d3d;">Some text here </p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment