Skip to content

Instantly share code, notes, and snippets.

@LuisSevillano

LuisSevillano/triangles.css

Created January 18, 2018 08:57
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 LuisSevillano/b6acc4a5c8ea8dc30360a1bb3f1291c3 to your computer and use it in GitHub Desktop.
Save LuisSevillano/b6acc4a5c8ea8dc30360a1bb3f1291c3 to your computer and use it in GitHub Desktop.
Download ZIP
Positioning triangles inside an element with CSS pseudo elements
Raw
triangles.css
.pill {
position: relative;
}
.pill::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 100%;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid black;
margin-left: 10px;
}
.pill::after {
content: '';
position: absolute;
top: 50%;
right: 0;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid black;
margin-right: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment