.dice{position:relative;width:40px;height:40px;background:#fff;border:1px solid #666;display:flex;align-items:center;justify-content:center}.dice:before{content:'';width:20%;height:20%;border-radius:50%}.dice.pip-1:before{background:red}.dice.pip-2:before{background:0 0;box-shadow:#333 -10px -10px 0 0,#333 10px 10px 0 0}.dice.pip-3:before{background:#333;box-shadow:#333 -10px 10px 0 0,#333 10px -10px 0 0}.dice.pip-4:before{background:0 0;box-shadow:#333 -10px 10px 0 0,#333 -10px -10px 0 0,#333 10px 10px 0 0,#333 10px -10px 0 0}.dice.pip-5:before{background:#333;box-shadow:#333 -10px -10px 0 0,#333 -10px 10px 0 0,#333 10px -10px 0 0,#333 10px 10px 0 0}.dice.pip-6:before{background:0 0;box-shadow:#333 -10px -10px 0 0,#333 -10px 0 0 0,#333 -10px 10px 0 0,#333 10px -10px 0 0,#333 10px 0 0 0,#333 10px 10px 0 0}