Pure CSS portal

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);
}