可以根据其旋转父级裁剪文本背景

Question

我正在尝试从this site复制选择项。当鼠标经过图像时，将显示一个文本，其中显示了一些文本，如下所示。

我一直在检查页面的源代码，但到目前为止，我还无法复制该行为。我仍然无法“裁剪”文本字段背景图像，如下所示。

这是jsx代码：

import React, { Component } from "react";

const pathMenu = {
listStyleType: "none",
position: "relative",
paddingTop: "10px",
width: "70%",
textAlign: "center"
};

const imgDiamond = {
display: "block",
position: "relative",
width: "126px",
height: "126px",
borderColor: "#ff794a",
borderWidth: "3px",
borderStyle: "solid",
transform: "rotate(-45deg)"
};

const h4Diamond = {
display: "block",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%) rotate(45deg)",
fontSize: "1.2rem",
color: "#fff",
backgroundColor: "rgba(255,119,73,0.7)",
transitionProperty: "all",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
overflow: "hidden",

paddingTop: "10px",
paddingRight: "40%",
paddingBottom: "10px",
paddingLeft: "40%"
};

class Example extends Component {
state = {};
render() {
    return (
    <div align="center">
        <ul style={pathMenu}>
        <li>
            <a href="#wow" style={imgDiamond}>
            <h4 style={h4Diamond}>Test Message</h4>
            </a>
        </li>
        </ul>
    </div>
    );
}
}

export default Example;