自己用svg画好,然后用绝对定位好文字内容,如下所示:
//外框
svgHeader = (width, height) => {
const corner_top_left = "0,0";
const corner_top_right = `${width},0`;
const corner_bottom_left = `0,${height}`;
const corner_bottom_right = `${width},${height}`;
//三角和线的距离
const empty_wh = 5;
//三角宽度
const triangel_width = 10;
//三角高度
const triangel_height = 10;
// 除了三角的起始点x
const full_start_x = `${triangel_width + empty_wh},0`;
//除了三角的起始点y
const full_start_y = `0,${triangel_height + empty_wh}`;
//除了三角完整的线
const corner_full = `${full_start_x} ${corner_top_right} ${corner_bottom_right} ${corner_bottom_left} ${full_start_y} ${full_start_x}`;
// 左上三角
const corner_top_left_triangel = `${corner_top_left} ${triangel_width},0 0,${triangel_width} ${corner_top_left}`;
const top_line = `${full_start_x} ${corner_top_right}`;
const right_line = `${corner_top_right} ${corner_bottom_right}`;
return (
);
};