css播放按钮，三角箭头

CSS

.p-open-icon {
                width: 50px;
                height: 50px;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -25px;
                background-color: #0c0b0b26;
                border-radius: 50%;
                border: 1px solid #fff;
                .arrow {
                    position: absolute;
                    top: 15px;
                    left: 20px;
                }
                .arrow:before,
                .arrow:after {
                    position: absolute;
                    content: '';
                    border-top: 10px transparent dashed;
                    border-right: 10px transparent dashed;
                    border-bottom: 10px transparent dashed;
                    border-left: 10px #fff solid;
                }
            }

html

<div class="p-rig-img" style="position:relative;">
    <img src="" alt="">
     <i class="p-open-icon">
         <span class="arrow"></span>
     </i>
 </div>