如何在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>
解决方法
喜欢这个 ：
.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/
希望它有帮助
