Javascript css sqaure/矩形的右侧是否可能看起来像直角三角形

我想知道它是否能够在一个css中有一个在右边有点的正方形，比如这样：

我试着用一个div来做一个，但操作起来不够简单，当我创建一个正方形时，只需要在上面加一个三角形就可以了。但我想要的是css上的东西，比如正方形和直角三角形的组合

这是我的名片。我只是临时编了一些小提琴来创作这个东西

<div id="nav">
    <a>PLAY</a>
</div>
<div id="triangle-up" />

#triangle-up {
    width: 0;
    height: 0;
    border-left: 35px solid red;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;    
    float: left;
}
#nav {
    float:left;
    display: block;
    height:50px;
    padding: 0px 10px;
    background: red;
}
#nav a {
    margin: 25px 0px;
}

玩
#三角{
宽度：0；
身高：0；
左边框：35px实心红色；
边框底部：25px实心透明；
边框顶部：25px实心透明；
浮动：左；
}
#导航{
浮动：左；
显示：块；
高度：50px；
填充：0px 10px；
背景：红色；
}
#导航a{
利润率：25px 0px；
}

使用

div{
position:relative；/*必须将其设置为relative，才能在绝对值中使用：before*/
宽度：60px；
高度：40px；
背景：红色
}
部门：以前{
内容：''；
位置：绝对位置；
左：100%；
排名：0；
边框顶部：20px实心透明；
边框底部：20px实心透明；
左边框：20px纯红
}

---

Play

我有一个后续问题：before是否也可能是div的一部分，因为div是一个锚定，所以当我选择：before div时，它不是锚定的一部分@坦博