如何在CSS中创建一个带箭头的框？

如何在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/

希望它有帮助

原文地址：https://www.jb51.cc/css/218855.html