<ul class="ps4">
<li class="p"></li>
<li class="s"></li>
<li class="4"></li>
</ul>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #054492;
font-size: 10px;
line-height: 1;
}
.ps4 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0 6.2em 0 0;
margin: 0;
}
.ps4 li {
position: relative;
}
.ps4::before,
.ps4::after,
.ps4 li::before,
.ps4 li::after {
position: absolute;
display: block;
content: "";
box-sizing: border-box
}
.ps4 .p {
width: 10em;
height: 7em;
background: linear-gradient(#fff, #fff) left top / 3em .8em no-repeat;
margin-right: -.3em;
}
.ps4 .p::before {
top: 0;
right: 0;
width: 7em;
height: 3.8em;
box-shadow: -.8em 0 0 .8em #fff inset;
border-radius: 0 2em 2em 0
}
.ps4 .p::after {
bottom: 0;
left: 0;
width: 3em;
height: 4em;
box-shadow: .8em .8em 0 0 #fff inset, 1.5em 0 0 0 #fff inset;
border-radius: 1.7em 0 0 0 / 1.8em 0 0 0;
}
.ps4 .s {
width: 12em;
height: 7em;
margin-right: -.5em;
}
.ps4 .s::before {
top: 0;
right: 0;
width: 6.75em;
height: 3.5em;
box-shadow: .8em .8em 0 0 #fff inset, 1.5em 0 0 0 #fff inset;
border-radius: 1.7em 0 0 0 / 1.8em 0 0 0;
}
.ps4 .s::after {
bottom: 0;
left: 0;
width: 6.75em;
height: 3.5em;
box-shadow: -.8em -.8em 0 0 #fff inset, -1.5em 0 0 0 #fff inset;
border-radius: 0 0 1.7em 0 / 0 0 1.8em 0;
}
.ps4 .\34,
.ps4 .\34::before,
.ps4 .\34::after {
width: 6em;
height: 6em;
border-top-right-radius: 30%;
background: #fff;
}
.ps4 .\34 {
top: -.3em;
left: -.85em;
transform: rotate(90deg) scale(.51,.9);
transform-origin: bottom right;
border-radius: 0;
background: none;
}
.ps4 .\34::before {
transform: rotate(-135deg) skewX(-45deg) scale(1.5,.75) translate(0,-50%);
}
.ps4 .\34::after {
transform: rotate(135deg) skewY(-45deg) scale(.75,1.5) translate(50%);
}
.ps4::before {
right: 0;
bottom: 0;
width: 12em;
height: 7em;
background:
linear-gradient(-90deg, transparent 1.5em, #fff 1.5em, #fff 3em, transparent 3em) right bottom / 12em 6em no-repeat,
linear-gradient(#fff 53%, transparent 53%) right bottom / 8em 1.5em no-repeat;
}
.ps4::after {
right: 3em;
bottom: 1.5em;
width: 7em;
height: 4em;
background: linear-gradient(150deg, transparent 50%, #054492 50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.