fix
Amira Dhalla
Cool tool alert: a CSS code generator http://enjoycss.com/start/ #teachtheweb
Proceed(9)
Thanks for your like.
You've done it, haven't you?
{"sid":"xu","rid":10,"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="enjoy-css">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor rhoncus libero quis tincidunt. Aliquam erat volutpat. Vestibulum eget leo odio. In ultricies, turpis ac consequat imperdiet, diam est accumsan arcu, eget cursus nisi arcu id nunc. Integer odio justo, hendrerit dictum augue sed, consectetur vehicula risus. Nulla facilisi. Maecenas sit amet egestas dolor, quis egestas dui. Cras justo ante, rutrum sit amet nisl sit amet, imperdiet rhoncus diam. Nam dapibus, tortor mattis gravida cursus, magna lacus interdum nisi, eu tristique nunc felis id nisl. Donec molestie iaculis laoreet. Morbi lectus augue, ultricies vitae tellus ut, consequat luctus nisl. Sed aliquam quam non quam ullamcorper, eget consectetur purus aliquet. Nam tempus massa a enim molestie bibendum. Duis ac dolor nibh. Nunc sollicitudin leo eget sem dapibus tempus.</div>
Copy to clipboard
CSS
LESS
SCSS
.enjoy-css {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: relative;
  padding: 15px 30px;
  border: none;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  font: normal 100%/normal "Times New Roman", Times, serif;
  color: rgb(255, 255, 255);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, rgb(184,219,41) 0, rgb(90,143,0) 100%), rgba(0,0,0,0);
  background: -moz-linear-gradient(180deg, rgb(184,219,41) 0, rgb(90,143,0) 100%), rgba(0,0,0,0);
  background: linear-gradient(180deg, rgb(184,219,41) 0, rgb(90,143,0) 100%), rgba(0,0,0,0);
  -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;
}

.enjoy-css::after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 0;
  position: absolute;
  content: "";
  bottom: -50px;
  left: 50px;
  border-top: 0 solid rgba(0,0,0,0);
  border-right: 20px solid rgb(90,143,0);
  border-bottom: 50px solid rgba(0,0,0,0);
  border-left: 0 solid rgb(90,143,0);
  font: normal 100%/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: none;
}