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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.