How to make css border shape

Question

I have created one box using following code :

width:153px;
height: 39px;
border: 1px solid #cfcfcf;

and it's out put is plain box. But I want to make it shape like following :

--/\---

What CSS code do I have to write to make it like this? I have tried many border code but didn't work.

score 2 · Answer 1 · answered Nov 08 '13 at 05:31

As it turns out, yes you can. I honestly cannot explain it properly because doing polygons with css is one of those things that I still can't get the hang of. It took me around 6 tries of swapping out the border directions to get the triangle to point upwards. So here's the css.

This article has everything you'll need and more. http://css-tricks.com/examples/ShapesOfCSS/#triangle-up

http://jsfiddle.net/9HRBb/

.box {
    width:153px;
    height: 39px;
    border: 1px solid #cfcfcf;
    margin-top:50px;
    position:relative;
}

.box:before {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-10px;
    left:50px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #cfcfcf;
}

.box:after {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-8px;
    left:52px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:18px solid white;
}

@Tree To help you understand triangles using CSS draw a rectangle, put a cross `X` inside, see the (border-bottom) arrow pointing up? Now add to every border a width and paint the desired one in a color. — Roko C. Buljan, Nov 08 '13 at 06:33

score 1 · Answer 2 · answered Nov 08 '13 at 05:31

1

you must use this syntax:

.class:after 
{
 content: '';
position: absolute;
border-width: 10px;
border-style: none solid solid solid;
border-color: transparent transparent black;
right: 0px;
}

answered Nov 08 '13 at 05:31

user1956570

132
1
6

Roko C. Buljan · Accepted Answer · 2013-11-08T06:31:05.873

1

DEMO

enter image description here

<span class="box"> This is a tooltip! </span>

.box{
  position:relative;
  background:#000;
  color:#fff;
  display:inline-block;
  padding:15px;
  border-radius:5px;
}
.box:after{
  position:absolute;
  content:'';
  left:50%;
  margin-left:-10px;
  top:-20px;
  border: 10px solid transparent;
  border-bottom: 10px solid #000;
}

DEMO

enter image description here

.box{
  position:relative;
  background:#fff;
  display:inline-block;
  padding:15px;
  border-radius:5px;
  border:1px solid #888;
}
.box:after{
  position:absolute;
  content:'';
  height:20px;
  width:20px;
  background:#fff;
  left:50%;
  margin-left:-10px;
  top:-11px;
  border-top:1px solid #888;
  border-left:1px solid #888;

  -webkit-transform: rotate(45deg);  /* Saf3.1+ */     
  -moz-transform: rotate(45deg);  /* FF3.5/3.6 */
  -ms-transform: rotate(45deg);  /* IE 9+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  transform: rotate(45deg);  /* Newer browsers (incl IE9) */
}

edited Nov 08 '13 at 06:31

answered Nov 08 '13 at 05:39

Roko C. Buljan

196,159
39
305
313

nice one.... how to change it in white color – 404 Not Found Nov 08 '13 at 05:57
1

@404NotFound :) just change `#000` to `#fff` and vice-versa – Roko C. Buljan Nov 08 '13 at 05:58
i want to give #000 to /\ border... now it's white – 404 Not Found Nov 08 '13 at 06:02
@404NotFound added a demo to my answer – Roko C. Buljan Nov 08 '13 at 06:04
it's showing something like this http://jsbin.com/AQeMiRa/1/edit – 404 Not Found Nov 08 '13 at 06:08
1

@404NotFound edited. Added a demo – Roko C. Buljan Nov 08 '13 at 06:31

How to make css border shape

--/\---

3 Answers3