Question

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

我试图制作一个只是使用一个div我无法操作它更容易创建一个正方形然后只需加一个三角形就可以了。但是我想要的东西只是在css上，就像方形和三角形的组合一样。

这是我的http://jsfiddle.net/wbZet/1311/。我只是即兴创作了一些小提琴。

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

css方形/矩形是否有可能使右侧看起来像一个三角形

1 个答案: