Contain
Third Eye
Solution:
<div></div>
<style>
body {
background: radial-gradient(circle at 0 0, #d9d9d9 75px, transparent 20px),
radial-gradient(circle at 100% 100%, #d9d9d9 75px, #e3516e 20px);
}
div {
background: #d9d9d9;
margin: 100 auto;
width: 100px;
height: 100px;
border-radius: 100% 0px;
transform: rotate(45deg);
}
</style>
Minified:
<p><style>&{background:radial-gradient(100q at 0 0,#D9D9D9 25vh,#FFFFFF00 0),radial-gradient(100q at 100%100%,#D9D9D9 25vh,#E3516E 0)}p{background:#D9D9D9;margin:26%142;width:100;height:100;border-radius:100%0;rotate:45deg
Curtains
Solution:
<div></div>
<p></p>
<style>
body {
background: #4f77ff;
}
div {
width: 60px;
height: 200px;
background: #1038bf;
margin: 50px 42px;
box-shadow: 120px 0 0 0 #1038bf, 240px 0 0 0 #1038bf;
}
p {
width: 20px;
height: 200px;
background: #ffffff;
box-shadow: 120px 0 0 0 #ffffff;
position: absolute;
top: 34px;
left: 130px;
}
</style>
Minified:
<body bgcolor=4F77FF><p><p a><style>p{width:60;height:200;background:#1038BF;color:1038BF;margin:50 42;box-shadow:30vw 0,60vw 0}[a]{width:20;background:#FFF;box-shadow:30vw 0#FFF;margin:-65%122