Skip to content

Instantly share code, notes, and snippets.

@pyfisch
Created April 17, 2017 12:14
Show Gist options
  • Select an option

  • Save pyfisch/769b90a0645eab789f61ffec82162806 to your computer and use it in GitHub Desktop.

Select an option

Save pyfisch/769b90a0645eab789f61ffec82162806 to your computer and use it in GitHub Desktop.
<!doctype html>
<style>
.test {
width: 200px;
height: 100px;
border: solid 10px rgba(0, 0, 255, 0.5);
/*background-clip: content-box;*/
}
#gradient1 {
border-left-width: 100px;
background-image: linear-gradient(to right top, black 49%, white 50%);
}
#gradient2 {
margin-left: 90px;
background-image: linear-gradient(to right top, black 49%, white 50%);
}
#gradient3 {
border-left-width: 100px;
background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%);
}
</style>
<div id="gradient1" class="test"></div>
<div id="gradient2" class="test"></div>
<div id="gradient3" class="test"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment