javascript - css sqaure/rectangle 是否有可能让右边看起来像一个三 Angular 形 right

Question

我想知道它是否能够在一个 css 中有一个右侧有一个点的正方形:

http://prntscr.com/59wn94

我试图通过使用一个 div 来制作一个我无法对其进行足够的操作，因为当创建一个正方形然后在其上添加一个三 Angular 形时要容易得多。但我想要一些只在 css 上的东西，比如正方形和三 Angular 形的组合。

这是我的 http://jsfiddle.net/wbZet/1311/ .我只是即兴创作了一些 fiddle 来创造这些东西。

<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;
}

Answer 1

使用Pseudo-elements - CSS

div{
  position: relative;/*it important to set this to relative to be able to use :before in absolute*/
  width: 60px;
  height: 40px;
  background: red
}

div:before{
  content: '';
  position:absolute;
  left: 100%;
  top: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid red

}

<div>Play</div>