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

前端之家收集整理的这篇文章主要介绍了如何在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.f2er.com/css/218855.html

猜你在找的CSS相关文章