Arrow Box with CSS

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

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>

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>

CSS arrow with border add box shadow

The solution of your problem can be solved, like the one posted here:
https://codepen.io/ryanmcnz/pen/JDLhu

Basically:

1. Create a square (::after), rotate it and add box shadow.

2. Create a second square (::before) that overlaps the box shadow casted inside the balloon.

body {  background-color: #fff;}
.triangle {  position: relative;  margin: 3em;  padding: 1em;  box-sizing: border-box;  background: #fff;  border: 1px solid #fafafa;  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);}.triangle::after{    z-index: -10;    content: "";    position: absolute;    width: 0;    height: 0;    margin-left: 0;    bottom: 0;    top: calc(50% - 5px);    left:0;    box-sizing: border-box;        border: 5px solid #fff;    border-color: transparent transparent #fff #fff;        transform-origin: 0 0;    transform: rotate(45deg);        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);  }.triangle::before{    z-index: 10;    content: "";    position: absolute;    width: 0;    height: 0;    margin-left: 0;    bottom: 0;    top: calc(50% - 5px);    left:0;    box-sizing: border-box;        border: 5px solid black;    border-color: transparent transparent #fff #fff;        transform-origin: 0 0;    transform: rotate(45deg);  }

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</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

Is there a way to add a border to an arrow shape with CSS?

That is the closest thing which I can achieve with pure css. I hope it can help you at least a little bit. Let me know it does.

.box{
  font-size:20px;
  position:relative;
  display:inline-block;
  margin:5em;
  text-align:center;
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.5));
}

.arrow {
  height: 30px;
  display:inline;
  position:relative;
}

.content{
  display:inline-block;
  padding: 0.7em 1em 0.5em;
  min-width: 10em;
  background: linear-gradient(270deg, #B07537 0, #F0B971 100%);
  position:relative;
  color: white;
  font-weight: 500;
}

.box:before,
.box:after,
.arrow:before,
.arrow:after {
  content:'';
  position:absolute;
  border-style:solid;
}

.arrow:before {
  top: -0.2em;
  bottom: 0;
  left:-1.85em;
  margin: auto;
  border-width: 1.4em 1em 1.4em 1.15em;
  border-color: #fccc4f #fccc4f #fccc4f transparent;
  z-index:-1;
}

.arrow:after {
  left:-1.5em;
  margin: auto;
  border-width: 1.2em 1em 1.2em 1em;
  border-color: #F0B971 #F0B971 #F0B971 transparent ;
  z-index:-1;
}

.box:before{
  top: -0.15em;
  bottom: -0.15em;
  left:0;
  right: 0;
  margin: auto;
  border-width: 1.4em 1em 1.4em 1.15em;
  border-color: #fccc4f #fccc4f #fccc4f transparent;
  z-index:-1;
}

.box:after{
  bottom: -.6em; 
  right:0;
  border-width: 0 0 .4em .7em;
  border-color:  gray transparent transparent gray ;
}

.text {
  margin-left: -2em;
  line-height: 1;
  letter-spacing: 2px;
  font-weight: bold;
}

/* .text:before{
  top:100%; left:0;
  border-width: .5em 2em 0 0;
  border-color: #FC9544 transparent transparent transparent;
} */

<div class="box">
  <div class="arrow"></div>
  <div class="content">
    <span class="text">Text</span>
    </div>
</div>

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>

Arrow Box with CSS

How to make a box with arrow in CSS?

Arrow Box with CSS

How to do continuous arrow boxes in CSS HTML

CSS arrow with border add box shadow

Creating box having css arrow using css3

Is there a way to add a border to an arrow shape with CSS?

Box with arrow without using pseudo-elements

Related Topics

Leave a reply