Play icon using pure css

Play icon using pure css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Play icon using pure css</title>
        <style>
            body {
                background-color: #fff;
                margin: 0;
                padding: 0;
            }
            .block {
                position: relative;
                width: 200px;
                height: 200px;
            }
            .play-button {
                width: 100px;
                height: 100px;
                position: absolute;
                top: 48px;
                right: 48px;
                border: 4px solid #222;
                border-radius: 54px;
            }
            .play-button span {
                position: absolute;
                top: 14px;
                left: 30px;
                width: 0;
                height: 0;
                border-top: 36px solid transparent;
                border-bottom: 36px solid transparent;
                border-left: 60px solid #222;
            }
        </style>
    </head>
    <body>
        <div class="block">
            <span class="play-button">
            <span></span>
        </span>
        </div>
    </body>
</html>

Links:

Licensed under CC BY-SA 3.0