css arrow with bottom border

Question

I need to create an arrow inside a div. I have created the arrow but need to get the visul effect with border as shown as below

enter image description here

Demo of the tried sample http://jsfiddle.net/rLZkf/4/

div {
  margin: 20px;
  height: 200px;
  width: 200px;
  background-color: #c1c1c1;
  border: #000 solid 2px;
  background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), -moz-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -ms-linear-gradient(135deg, transparent 75%, #fff 75%), -ms-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -o-linear-gradient(135deg, transparent 75%, #fff 75%), -o-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: linear-gradient(135deg, transparent 75%, #fff 75%), linear-gradient(45deg, transparent 75%, #fff 75%);
  background-position: 30px 0, 0 0;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}

<div></div>

sandeep · Accepted Answer · 2012-09-28T06:23:25.790

4

You can use CSS3 rotate property for this. Write like this:

div {
    margin:20px;
    height: 200px;
    width: 200px;
    background-color: #c1c1c1;
    border:#000 solid 2px;
    position:relative;
}
div:after{
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:-11px;
    left:10px;
    border-right:#000 solid 2px;
    border-bottom:#000 solid 2px;
}

Check this http://jsfiddle.net/rLZkf/6/

UPDATED

Check this http://jsfiddle.net/rLZkf/9/

edited Sep 28 '12 at 06:23

answered Sep 28 '12 at 06:09

sandeep

91,313
23
137
155

1

Hey sandeep thanks but the body has diffrnt color in tat case arrow is visible on the top of the div also. here is the example http://jsfiddle.net/rLZkf/8/ How can we fix this?? – Sowmya Sep 28 '12 at 06:13
1

Check the link that's you want http://jsfiddle.net/rLZkf/9/ – sandeep Sep 28 '12 at 06:20
Hey it is not working IE.. It is ok if it works with IE 9. Can u pls check – Sowmya Sep 28 '12 at 12:33
I added -ms-transform:rotate(45deg); it works for IE 9 but not for below versions – Sowmya Sep 28 '12 at 12:39

score 0 · Answer 2 · answered May 20 '15 at 07:55

Personally, I quite like to use a different approach to the chosen answer here.

Using the principle explained on https://css-tricks.com/snippets/css/css-triangle/ for example, you can use two pseudo elements to create the effect you're after.

You will basically create two triangles using this border trick: one will be the same colour as your page background and the other will be the same as your container border and will act as a 'border' to the first triangle.

You then just offset the position of the two triangles so they're on top of your container border and that's it.

.container:after,
.container:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent; 
  content: " ";
  left: 10px; 
  margin-top: -1px;
  position: absolute;
}

.container:before {
  border-top: 10px solid #000;
  top: 1px; 
}

.container:after {
  border-top: 10px solid #fff;
  top: 0px; 
}

Of course you can just wrap the whole thing in a mixin if you use Sass or similar and pass it the colours / arrow size.

See http://codepen.io/arnaudvalle/pen/EjgYrp for a quick example

css arrow with bottom border

2 Answers2

Linked