How to Create a Box with a Left Arrow and Border

How to create a box with a left arrow and border

Here is my best try:

CSS

.map_infobox {
margin: 30px 0 0 30px;
position: relative;
background: #FFF;
border-radius: 10px;
width: 250px;
height: 250px;
border-opacity: 0.3;
border: 5px solid rgba(0, 0, 0, .2);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.map_infobox:before{
content: "";
position: absolute;
top: 50%;
left: -35px;
z-index: 1;
height:60px;
width:30px;
margin-top: -15px;
background: linear-gradient(-45deg, white 17px, rgba(0,0,0,0.2) 17px, rgba(0,0,0,0.2) 21px, transparent 21px), linear-gradient(225deg, white 17px, rgba(0,0,0,0.2) 17px, rgba(0,0,0,0.2) 21px, transparent 21px);
background-position: left 0px, right bottom;
background-size: 100% 50%;
background-repeat: no-repeat;
}

.map_infobox:after{
content: "";
position: absolute;
top: 50%;
left: -35px;
z-index: 1;
height: 48px;
width:30px;
margin-top: -14px;
border-right: solid 5px white;
border-top: solid 5px transparent;
border-bottom: solid 5px transparent;
}

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>

How to make arrows on both sides of a box using css

Try this (using Pseudo-elements):

CSS

#arrowbox
{
width: 200px;
height: 50px;
background-color:green;
margin-left:100px;
margin-top:100px;
position: relative;
}

#arrowbox:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 128, 0, 0);
border-left-color: #008000;
border-width: 25px;
margin-top: -25px;
}

#arrowbox:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 128, 0, 0);
border-right-color: #008000;
border-width: 25px;
margin-top: -25px;
}

DEMO HERE

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>

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>

Give a CSS border arrow a border on 1 side

Using svg you could create your text bubble and apply linearGradient to it.

body {  background: #eee;}
<svg width="100" height="50" preserveAspectRatio="none" viewBox="-1 -1 102 52">  <defs>    <linearGradient id="grad">      <stop offset="97%" stop-color="#fff" />      <stop offset="97%" stop-color="#237ACB" />    </linearGradient>  </defs>  <path d="M0,5 a5,5 0 0,1 5,-5 h95 v45 l-10,-10 h-85 a5,5 0 0,1 -5,-5" fill="url(#grad)" />  <text x="50%" y="40%" text-anchor="middle" font-size="10">Great Thanks</text></svg>


Related Topics



Leave a reply



Submit