如何在CSS中制作一个带箭头的盒子? [英] How to make a box with arrow in CSS?

问题描述

如何在CSS中制作带有箭头的框?

How to make a box with arrow in CSS?

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

Making round corner is easy. but any idea to make the arrow on left side without using image.

是否有可能

只有一个元素<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/

希望有帮助

这篇关于如何在CSS中制作一个带箭头的盒子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！