JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<!-- <div class="background-test">
  <div class="content">
    Hallo
  </div>
   <div class="corner top-left"></div>
</div> -->
<div class="background-outher">
  <div class="background-test">
    <div class="content">
       <p>
       By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).
       </p>
              <p>
       By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).
       </p>
              <p>
       By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).
       </p>
              <p>
       By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).
       </p>
             
     </div>
     <div class="round round--type--a"></div>
  </div>
</div>

SCSS

$circle-radius: 300px;
$circle-radius-mobile: 500px;
$circle-rendering: $circle-radius + 1px;
$circle-position-x: 0;
$circle-position-y: 0;

@mixin radial-gradient($radial-radius, $radial-position-x, $radial-position-y, $radial-color-from, $radial-color-to) {
	background: -moz-radial-gradient(circle at $circle-position-x $circle-position-y, $radial-color-from $radial-radius, $radial-color-to ($radial-radius + 1));
	background: -webkit-gradient(circle at $circle-position-x $circle-position-y, $radial-color-from $radial-radius, $radial-color-to ($radial-radius + 1));
	background: -webkit-radial-gradient(circle at $circle-position-x $circle-position-y, $radial-color-from $radial-radius, $radial-color-to ($radial-radius + 1));
	background: -o-radial-gradient(circle at $circle-position-x $circle-position-y, $radial-color-from $radial-radius, $radial-color-to ($radial-radius + 1));
	background: -ms-radial-gradient(circle at $circle-position-x $circle-position-y, $radial-color-from $radial-radius, $radial-color-to ($radial-radius + 1));
	background: radial-gradient(circle at $radial-position-x $radial-position-y, $radial-color-from $radial-radius, $radial-color-to ($radial-radius + 1));
	background-color: $radial-radius;
  width: $radial-radius;
}

.background-test {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #ccc;
  position: relative;
  padding: 2em;
  box-sizing: border-box;
  max-width: 960px;
  color: #fff;
  font-family: Arial;
  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4a7e3e+0,4b7c3f+47,d0e5da+100 */
background: rgb(74,126,62); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(74,126,62,1) 0%, rgba(75,124,63,1) 47%, rgba(208,229,218,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(74,126,62,1) 0%,rgba(75,124,63,1) 47%,rgba(208,229,218,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(74,126,62,1) 0%,rgba(75,124,63,1)...