JSFiddle - React, Tailwind, and code Playground

by Abid Rakhmansyah

HTML

<section>
Effect Lipatan pada sudut halaman dengan CSS.
Credit : coderaw.blogspot.com
</section>

CSS

section
{
	quotes:none
}

section:before,section:after
{
	content:none
}
section,
{
	margin:0 0 20px
}
section:last-child
{
	margin-bottom:0
}
section
{
	display:block;
	font-weight:400;
	background-color:#796490;
	color:#FFF;
	position:relative;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2);
	-moz-box-shadow:0 1px 0 rgba(0,0,0,.2);
	box-shadow:0 1px 0 rgba(0,0,0,.2);
	padding:20px 22px 20px 50px
}

section a,section a:focus,section a:hover
{
	color:#FFC0CB
}
section:after
{
	content:"";
	display:block;
	width:0;
	height:0;
	border:10px solid;
	position:absolute;
	top:0;
	right:0;
	-webkit-border-radius:0 0 0 3px;
	-moz-border-radius:0 0 0 3px;
	border-radius:0 0 0 3px;
	-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);
	-moz-box-shadow:0 1px 0 rgba(0,0,0,.1);
	box-shadow:0 1px 0 rgba(0,0,0,.1);
	border-color:#FFF #FFF #937CAD #937CAD
}