Arrow Before and After a Box with CSS

Arrow before and after a box with CSS

I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:

<div class="arrow">
    <div class="inner-arrow">
        FLECHA
    </div>
</div>

Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).

.arrow {
    font-size: 0;
}
.inner-arrow {
    width:210px;
    height:40px;
    display: inline-block;
    background-color:#CBCBCB;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:40px;
    vertical-align: middle;
}

Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).

.arrow:before,
.arrow:after {
    content:'';
    display: inline-block;
    width:0;
    height:0;
    border:20px solid transparent;
    vertical-align: middle;
}
.arrow:before {
    border-top-color: #CBCBCB;
    border-bottom-color: #CBCBCB;
    border-right-color: #CBCBCB;
}
.arrow:after {
    border-left-color: #CBCBCB;
}

This is all in the a fiddle.

How to make a box with arrow in CSS?

Like this :

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

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

UPDATE :

It can also be achieved without empty elements with the css property :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/

hope it helps

Box with arrow without using pseudo-elements

Based on this previous answer I will adjust slightly the code to have a transparent background. There is two main tricks. Half the coloration of the pseudo element to avoid the intersection with the main element and the use of gradient on the main element to create the border top and create the hole for the pseudo element:

body {

 margin:0;

 background-image:linear-gradient(to right,yellow,pink);

}

.box {

  border: 2px solid red;

  border-top:transparent; /*make border-top transparent*/

  margin: 50px;

  height: 50px;

  position:relative;

  /* Use gradient to mimic the border top with a transparent gap */

  background:

    linear-gradient(red,red) left top /calc(50% - 10px*1.414) 2px,

    linear-gradient(red,red) right top/calc(50% - 10px*1.414) 2px,

    rgba(0,255,0,0.4);

  background-repeat:no-repeat;

}

.box:before {

  content: "";

  position: absolute;

  width: 20px;

  height: 20px;

  border-top: 2px solid red;

  border-left: 2px solid red;

  top: -11px;

  left: calc(50% - 11px);

  transform: rotate(45deg);

  background:linear-gradient(-45deg,transparent 50%,rgba(0,255,0,0.4) 50%);

}

<div class="box">

</div>

Produce a rectangle shaped box with a heavy straight right arrow in CSS

You can draw block with arrow on the right by using pseudo elements.

In this example I'm using CSS variables to easelly control sizes and gaps. If it's impossible to use for some reason, you can replace it manually and use this Code Snippet like an generator.

This approach also support shadows, if needed.

/* root variables */
:root {
  --space: 1rem;
  --bg-color: #47baffb3;
}

/* main block bg color and part between of block and arrow */
.arrow-block,
.arrow-block:before {
  background-color: var(--bg-color);
}

/* arrow block (text container) */
.arrow-block {
  position: relative;
  padding: var(--space);
  margin-right: calc(var(--space) * 3);
  filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .6));
}

/* arrow parts */
.arrow-block:before,
.arrow-block:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

/* part between block and arrow */
.arrow-block:before {
  height: calc(var(--space) * 2);
  width: var(--space);
  right: calc(var(--space) * -1);
}

/* arrow itself */
.arrow-block:after {
  --arrow-side-size: calc(var(--space) * 2);
  
  border-bottom: var(--arrow-side-size) solid transparent;
  border-top: var(--arrow-side-size) solid transparent;
  border-left: var(--arrow-side-size) solid var(--bg-color);
  right: calc(var(--space) * -3);
}

<div class="arrow-block">
  <p>Block with arrow</p>
  <p>Block with arrow second line</p>
</div>

How to do continuous arrow boxes in CSS HTML

Try to use display: flex and flex-direction: row-reverse for the parent block. So each next .box-item will be placed "under" the previous, and you will be able to adjust space between items by changing margin-right.

.box {

  display: flex;

  flex-direction: row-reverse;

  padding: 50px 20px;

}

.box-item {

  align-items: center;

  background: #3a7cca;

  border-radius: 4px;

  color: white;

  display: flex;

  flex-grow: 1;

  height: 40px;

  justify-content: center;

  margin-right: 2px;

  position: relative;

}

.box-item:before,

.box-item:after {

  border-color: transparent;

  border-style: solid;

  border-width: 20px 0 20px 10px;

  border-radius: 4px;

  content: "";

  height: 0;

  position: absolute;

  top: 0;

  width: 0;

}

.box-item:before {

  left: -1px;

  border-left-color: white;

}

.box-item:after {

  right: -9px;

  border-left-color: #3a7cca;

}

.box-item:first-child {

  margin-right: 0;

}

.box-item:last-child:before,

.box-item:first-child:after {

  display: none;

}

<div class="box">

  <div class="box-item">3</div>

  <div class="box-item">2</div>

  <div class="box-item">1</div>

</div>

Creating box having css arrow using css3

For navigation you can add <a> tag in your html page and for color of the class .box:after change the border color as below:

HTML:

<a href="http://www.w3schools.com" target="_blank"><div class="box"></div></a>

CSS:

 .box:after {
      content: '';
      position: absolute;
      left: 43%;
      top: 30%;
      margin-top: -18px;
      border-style: solid;
      border-width: 40px;
      border-color: transparent transparent transparent **rgba(7, 17, 241, 1);**    }

FIDDLE

Box arrow to take background colour of respective box

Since your element will have solid color you can create the arrow with a rectangle on where you apply rotation in order to achieve the layout then you can use inherit for background

.box {

  position: relative;

  width: 100px;

  height: 100px;

  margin-bottom: 40px;

  background:red;

}

.box::before {

  content:"";

  position:absolute;

  width:30px;

  height:30px;

  top:100%;

  left:20px;

  transform:translateY(-50%) rotateX(40deg) rotate(45deg);

  background:inherit;

}

.blue {

  background:blue;

}

.green {

  background:green;

}

<div class="box">

</div>

<div class="box blue">

</div>

<div class="box green">

</div>

Arrow Box with CSS

I created your element with the surrounding 1px border. I'm using one <div> element and taking advantage of the :before and :after pseudo-elements (browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other.

The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show the darker triangle underneath. The resulting illusion is a 1px dark border on the triangle itself.

Here's a question that asks a similar question:

How can I create a "tooltip tail" using pure CSS?

One of the answers actually has a great explanation of how one can achieve this triangle effect:

https://stackoverflow.com/a/5623150/196921

Also, this is an excellent reference for all the fancy things you can do with borders (thanks to PSCoder):

• http://css-tricks.com/examples/ShapesOfCSS/

... and here's a sweet css generator (thanks to David Taiaroa):

• http://cssarrowplease.com/

---

Anyway, here's the corresponding code:

    #arrow {

      width: 128px;

      height: 100px;

      background-color: #ccc;

      border: 1px solid #999;

      position: relative;

    }

    #arrow:after {

      content: '';

      position: absolute;

      top: 0px;

      left: 128px;

      width: 0;

      height: 0;

      border: 50px solid transparent;

      border-left: 12px solid #ccc;

    }

    #arrow:before {

      content: '';

      position: absolute;

      top: 0px;

      left: 129px;

      width: 0;

      height: 0;

      border: 50px solid transparent;

      border-left: 12px solid #999;

    }

<div id="arrow"></div>

---

Related Topics