Skip to content

Instantly share code, notes, and snippets.

@nogizhopaboroda
Last active January 3, 2018 22:16
Show Gist options
  • Select an option

  • Save nogizhopaboroda/843a61f56d8502f3f4b4ce1d7dae01a4 to your computer and use it in GitHub Desktop.

Select an option

Save nogizhopaboroda/843a61f56d8502f3f4b4ce1d7dae01a4 to your computer and use it in GitHub Desktop.
<style>
.wrapper {
width: 1000px;
height: 52px;
border: 1px solid gray;
overflow-x: hidden;
background: linear-gradient(0deg, gray, white);
}
.bullet {
width: 100px;
height: 50px;
position: relative;
border-right: none;
}
.bullet:after {
content: '';
width: 50px;
height: 50px;
position: absolute;
top: 0;
box-sizing: border-box;
transform: rotate(45deg);
border-radius: 10px;
left: calc(100% - 33px);
border-right: 1px solid gray;
border-top: 1px solid gray;
}
</style>
<div class="wrapper">
<div class="bullet"></div>
<div class="bullet"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment