<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-在css中绘制三角形-视频播放按钮(play button)</title>
    <style>
        .play-button-outer {
            padding: 1.5em;
            width: 5em;
            background-color: rgba(0, 0, 0, .25);
            cursor: pointer;
        }
        .play-button {
            margin: 0 auto;
            top: 25%;
            position: relative;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 2.5em 0 2.5em 5em;
            border-color: transparent transparent transparent #000;
            opacity: .75;
        }
        .play-button-outer:hover {
            background-color: rgba(0, 0, 0, .5);
        }
        .play-button-outer:hover .play-button {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="play-button-outer">
    <div class="play-button"></div>
</div>
</body>
</html>