How to make css border shape [duplicate]

Question

This question already has answers here:

Speech bubble with arrow (3 answers)

Closed 7 years ago.

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.

Answer 1

DEMO

<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

.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) */
}

Answer 2

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;
}

Answer 3

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;
}