Demo

#player {

  margin: 32px;

  position: relative;

  width: 400px;

  height: 250px;

  background-color: #222;

}



#inner {

  transform: rotate(45deg);

  background-color: silver;

  width: 100px;

  height: 100px;

  top: 20px;

  left: -50px;

  position: relative;

  border-radius: 20px;

}



#outer {

  position: absolute;

  top: 50px;

  left: 165px;

  width: 70px;

  height: 140px;

  overflow: hidden;

}


<div id="player">

  <div id="outer">

    <div id="inner"></div>

  </div>

</div>

这应该产生：

通过创建一个正方形，使用CSS变换旋转它，圆角化，并用一个外部框修剪它，可以达到这种效果。内部元件可以根据需要进行调整，因此具有一定的灵活性。

备择方案
SVG图像支持这种形状，并且在所有现代浏览器中均受支持。简单的SVG可以手工编码为XML，并且有许多免费/收费的编辑器可以使用它们。