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

How to make a box with arrow in CSS?

提问by Jitendra Vyas

How to make a box with arrow in CSS?

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

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

制作圆角很容易。但是任何想法都可以在不使用图像的情况下在左侧制作箭头。

Is it possible to make possible with

是否有可能实现

only one elements <p>....</p>

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

回答by Sparkup

Like this :

像这样 ：

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Demo :http://jsfiddle.net/sparkup/edjdxjf2/

演示：http : //jsfiddle.net/sparkup/edjdxjf2/

UPDATE :

更新 ：

It can also be achieved without empty elements with the css property :before

也可以通过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;
}

Demo: http://jsfiddle.net/sparkup/y89f1te0/

演示：http: //jsfiddle.net/sparkup/y89f1te0/

hope it helps

希望能帮助到你

回答by David Kaneda

Chris Coyier has an excellent roundup of the possible shapes built in CSS using a single element (and before/afters): http://css-tricks.com/examples/ShapesOfCSS/

Chris Coyier 对使用单个元素（以及之前/之后）在 CSS 中构建的可能形状进行了出色的综述：http://css-tricks.com/examples/ShapesOfCSS/

回答by The Pragmatick

Standard Tool-tip

标准工具提示

If you want a simple arrow, then you can add a pseudo element with border-right.

如果你想要一个简单的箭头，那么你可以添加一个带有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

小提琴 1

---

---

Flat edge Tool-tip

平边工具提示

If you want a flat edgefor arrow, try this :

如果你想要一个扁平的箭头边缘，试试这个：

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

小提琴 2

回答by Thilanka De Silva

Use this online tool and you can do it without typing lot of code

使用此在线工具，您无需输入大量代码即可完成

http://www.cssarrowplease.com

http://www.cssarrowplease.com

回答by Shahar Shokrani

My answer (with no flat edge), added some calculation formula:

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

.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;
}

The basic rules are:

基本规则是：

1. The before right value must be calculated with: (after's top) - (before's top) = (before's right)

1. 前右值必须计算为： ( after's top) - ( before's top) = ( before's right)

example: (-4px) - (-7px) = 3px

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

2. The beforeand after's topvalue must be identical to border-width.

3. The border color 3rd (#e0e0e0 in the example) value must be identical to its parent border color.

4. The before's z-indexmust at least one below the after's z-index.

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

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

4. 该before的z-index必须在至少一以下after的z-index。

example: (before's z-index) < (after's z-index) or 9998 < 9999.

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

The result:

结果：

回答by Syed Nurul Islam

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; }

the above code can be used for right arrow.

上面的代码可用于右箭头。

回答by Zhianc

You can make use of span if u don't want to use a div.

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

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

http://jsfiddle.net/SSKwn/

http://jsfiddle.net/SSKwn/