<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{padding:0px;margin:0px;background:#fff;}
.container{width:500px;height:300px;background-color:#36B11D;margin:100px auto;border-radius:10px;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;-ms-border-radius:10px;-o-border:40px solid #7201AA;}
.container:before{position:absolute;left:0px;top:0px;content:"";background:#fff;display:block;border:40px solid #7201AA;-webkit-border:40px solid #7201AA;-moz-border:40px solid #7201AA;
-ms-border:40px solid #7201AA;-o-border:40px solid #7201AA;border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-moz-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-webkit-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-ms-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-o-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent; }
.container:after{position:absolute;right:0px;top:0px;width:0px;content:"";border:40px solid #7201AA;background-color:#fff;-webkit-border:40px solid #7201AA;-moz-border:40px solid #7201AA;
-ms-border:40px solid #7201AA;-o-border:40px solid #7201AA;-moz-border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);
-ms-border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);-webkit-border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);
border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);box-shadow:-1px 1px 1px rgba(0,0,0,.5);-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.5);-ms-box-shadow:-1px 1px 1px rgba(0,0,0,.5);-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.5);-o-box-shadow:-1px 1px 1px rgba(0,0,0,.5);}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
