html
<div class="portal blue">
<div class="particle-1 blue"></div>
<div class="particle-2 blue"></div>
<div class="particle-3 blue"></div>
</div>
<div class="portal orange">
<div class="particle-1"></div>
<div class="particle-2"></div>
<div class="particle-3"></div>
</div>
css
/* coloration */
.blue, .blue *{
border-color: #50C0EE;
}
.orange, .orange *{
border-color: #FF5108;
}
/* main portal frame */
.portal{
position: relative;
width: 200px;
height: 320px;
border-style: solid;
border-width: 20px;
-webkit-border-radius: 140px / 210px;
-moz-border-radius: 140px / 210px;
border-radius: 140px / 210px;
}
/* particles effect */
.particle-1{
width: 200px;
height: 175px;
border-right-style: solid;
border-right-width: 11px;
-webkit-border-radius: 140px / 210px;
-moz-border-radius: 140px / 210px;
border-radius: 140px / 210px;
position: absolute;
right: 14px;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
.particle-2{
width: 86px;
height: 147px;
border-left-style: solid;
border-left-width: 8px;
-webkit-border-radius: 47px 37px 37px 37px / 200px 200px 200px 200px;
-moz-border-radius: 47px 37px 37px 37px / 200px 200px 200px 200px;
border-radius: 47px 37px 37px 37px / 200px 200px 200px 200px;
position: absolute;
left: -10px;
top: 14px;
transform: rotate(11deg);
-webkit-transform: rotate(11deg);
-moz-transform: rotate(11deg);
}
.particle-3{
width: 126px;
height: 118px;
border-bottom-style: solid;
border-bottom-width: 11px;
-webkit-border-radius: 140px;
-moz-border-radius: 140px;
border-radius: 140px;
position: absolute;
left: 52px;
top: 188px;
transform: rotate(13deg);
-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
}