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，并且有许多免费/收费的编辑器可以使用它们。
