如何在CSS中制作带箭头的方框？

Question

如何在CSS中制作带箭头的方框？

圆角很容易.但任何想法在不使用图像的情况下在左侧制作箭头.

是否有可能实现

只有一个元素 <p>....</p>

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

<p></p>

Answer 1

像这样 :

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

演示: http ://jsfiddle.net/sparkup/edjdxjf2/

更新:

它也可以在没有带css属性的空元素的情况下实现 :before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

演示:http://jsfiddle.net/sparkup/y89f1te0/

希望能帮助到你

Answer 2

Chris Coyier使用单个元素(以及之前/之后)对CSS内置的可能形状进行了很好的综述:http://css-tricks.com/examples/ShapesOfCSS/

Answer 3

标准工具提示

如果你想要一个简单的箭头,那么你可以添加一个伪元素border-right.

body {
    background:#ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 0px;
    width: 0px;
    top: 60px;
    left: -29px; /* 1px buffer for zooming problems while rendering*/
    border-width: 15px;
    border-color: transparent white transparent transparent;
    border-style: solid;
}

<p></p>

FIDDLE 1

扁边刀尖

如果你想要箭头的平边,试试这个:

body {
    background: #ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 45px;
    width: 16px; /* 1px buffer for zooming problems while rendering*/
    top: 50px;
    left: -15px; 
    background: white;
}
p:after {
    content:"";
    position: absolute;
    height: 40px;
    width: 15px;
    border-radius: 0 40px 40px 0;
    top: 75px;
    left: -15px;
    background: #ff004e;
    box-shadow: 0 -45px 0 0 #ff004e;
}

<p></p>

FIDDLE 2