fix
Kazumasa Okabe
OnlineTool which allows creating a nice look without writing a code. EnjoyCSS can be easily used by people who are not professionals in CSS coding.
Proceed(9)
Thanks for your like.
You've done it, haven't you?
{"sid":"13Ui","rid":0,"page":"code","page_params":[],"username":""}
Skip
Next

We'll add only required prefixes
for browsers you gonna choose,
based on data from caniuse.com
4+
4+
9+
10.5+
4+
5.0+
2.1+
7+
Hide default rules
Copy to clipboard
HTML
<div class="tear"></div>
Copy to clipboard
CSS
LESS
SCSS
.tear {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 10em;
  height: 10em;
  padding: 49px;
  border-top: 0 solid;
  border-right: 5px solid;
  border-bottom: 5px solid;
  border-left: 0 solid;
  -webkit-border-radius: 126% / 255%;
  border-radius: 126% / 255%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-radial-gradient(closest-side, rgba(239,143,143,1) 0, rgba(216,216,2,0.32) 5%, rgba(0,0,0,1) 17%, rgba(119,154,155,1) 47%, rgba(150,162,170,1) 49%, rgba(76,108,130,1) 52%, rgba(83,161,214,1) 60%, rgba(150,162,170,1) 68%, rgba(150,162,170,1) 71%, rgba(244,244,249,1) 89%, rgba(84,112,183,1) 96%, rgba(23,136,211,1) 99%, rgba(23,136,211,1) 100%);
  background: -moz-radial-gradient(closest-side, rgba(239,143,143,1) 0, rgba(216,216,2,0.32) 5%, rgba(0,0,0,1) 17%, rgba(119,154,155,1) 47%, rgba(150,162,170,1) 49%, rgba(76,108,130,1) 52%, rgba(83,161,214,1) 60%, rgba(150,162,170,1) 68%, rgba(150,162,170,1) 71%, rgba(244,244,249,1) 89%, rgba(84,112,183,1) 96%, rgba(23,136,211,1) 99%, rgba(23,136,211,1) 100%);
  background: radial-gradient(closest-side, rgba(239,143,143,1) 0, rgba(216,216,2,0.32) 5%, rgba(0,0,0,1) 17%, rgba(119,154,155,1) 47%, rgba(150,162,170,1) 49%, rgba(76,108,130,1) 52%, rgba(83,161,214,1) 60%, rgba(150,162,170,1) 68%, rgba(150,162,170,1) 71%, rgba(244,244,249,1) 89%, rgba(84,112,183,1) 96%, rgba(23,136,211,1) 99%, rgba(23,136,211,1) 100%);
  background-position: 11% 46%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-transform: rotateX(-65.31718864491384deg) rotateY(7.448451336700702deg) rotateZ(-45.26366581533504deg)   ;
  transform: rotateX(-65.31718864491384deg) rotateY(7.448451336700702deg) rotateZ(-45.26366581533504deg)   ;
}