<p top>
<p right>
<p left>
<p bottom>
<style>
body {
background: #B5D1FB;
margin: 0;
}
p {
width: 250;
height: 90;
border: 30px double transparent;
border-radius: 100px;
position: fixed;
background-clip: content-box, border-box !important;
background-origin: border-box !important;
}
[top], [right] {
margin: 75 -95;
background: linear-gradient(#B5D1FB, #B5D1FB), linear-gradient(#230259 50%, #0000 0 100%);
}
[right] {
scale: -1;
margin: 75 185;
}
[bottom], [left] {
margin: 75 185;
background: linear-gradient(#B5D1FB,#B5D1FB), linear-gradient(#8819F6 50%, #0000 0 100%);
z-index: -1;
}
[left] {
scale: -1;
margin: 75 -95;
}
</style>