Skip to content

Instantly share code, notes, and snippets.

@clivewalker

clivewalker/arrows-wth-css.html

Created February 25, 2016 13:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clivewalker/bacc247341f9a01614a7 to your computer and use it in GitHub Desktop.
Save clivewalker/bacc247341f9a01614a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
arrows-wth-css.html
<div class="arrow_box">
<h1 class="logo">css arrow please!</h1>
</div>
Raw
style.css
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
/*not needed for the arrow but looks nicer*/
.arrow_box {
width: 300px;
padding: 20px;
border-radius: 5px;
}
@clivewalker
Copy link
Author

No need for images. CSS shapes are great! This example from http://cssarrowplease.com/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment