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

- Jitendra Vyas

---

请看这里：https://dev59.com/LW035IYBdhLWcg3wGMHa#5633146 - JSFiddle: http://jsfiddle.net/DoubleYo/whbJb/5/。 - Floern

@Floem - +1 很好。http://jsfiddle.net/rABy9/1/ 还有一个问题，如何为箭头获得平坦的边缘。 - Jitendra Vyas

我必须指出CSS不是绘图程序，也不应该被用作此类程序。如果您需要一张图片，请使用图片。 - Rob

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/

希望对您有所帮助。

- Sparkup

---

很好，但箭头顶部不够锋利。虽然非常不错，但如果能避免空元素，就会更好。 - Jitendra Vyas

不添加<div id="pointer"></div>，是否可以使用before:实现？ - Jitendra Vyas

我不知道这样的方法，抱歉。 - Sparkup

@holodoc：Floern 提供的链接已经解决了问题。 - BoltClock

不错！我添加了pointer-events: none;，这样箭头就不会干扰下面按钮的点击了。 - Little Brain

Answer 2

Chris Coyier做了一个非常好的总结，介绍了使用单个元素（以及 before/after 伪元素）可以在CSS中创建的各种可能形状： http://css-tricks.com/examples/ShapesOfCSS/

- David Kaneda

---

+1 我一开始并没有立刻明白其他答案是如何在不旋转的情况下实现这一点的，直到我看到链接中的示例。 - Joe Hawkins

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

- The Pragmatick

Answer 4

使用这个在线工具，你可以轻松完成任务，无需输入大量代码。 http://www.cssarrowplease.com

- Thilanka De Silva

Answer 5

我的回答（没有平坦的边缘），加入了一些计算公式：

.mainBox {
    border: solid 1px #e0e0e0;        
}

.mainBox:before {
    content:"";
    position: absolute;
    /*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
    /*example: (-4px) - (-7px) = 3px*/
    right: 72px; 
    /*The `top` value must be identical to border-width*/
    top: -7px; 
    width: 0;
    height: 0;
    border-style: solid;
    /*The `border-width` value must be identical to top*/
    border-width: 0 7px 7px 7px;
    /*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
    border-color: transparent transparent #e0e0e0 transparent;
    /*The (z-index of before) must at least one below the (z-index of after)*/
    /*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
    z-index:9998;
}

.mainBox:after {
    content:"";
    position: absolute;
    right: 75px;
    top: -4px; /*suppose to be identical to border-width*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #fff transparent; 
    z-index:9999;
}

基本规则如下：

1. 右边的值必须用以下公式计算：
   (after 的 top) - (before 的 top) = (before 的 right)

例如：(-4px) - (-7px) = 3px

2. before 和 after 的 top 值必须与 border-width 相同。

3. 第三个边框颜色（在示例中为 #e0e0e0）必须与其父元素的边框颜色相同。

4. before 的 z-index 必须至少比 after 的 z-index 小一个。

例如：(before 的 z-index) < (after 的 z-index) 或 9998 < 9999。

结果：

- Shahar Shokrani

Answer 6

a.right{ border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  font-size: 100px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0; border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #666;
  left: 0.25em; }

上述代码可用于右箭头。

- Syed Nurul Islam

Answer 7

如果您不想使用 div，可以使用 span。

span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-85px 0 0 -20px;}

http://jsfiddle.net/SSKwn/

- Zhianc

---

我的观点是，空元素不具有语义，所以不要将div更改为span。 - Jitendra Vyas