为什么我不能将边框设置为工具提示上的箭头 div

Question

我创建了工具提示 div，我想制作没有背景的，我删除了背景颜色，但是我在删除箭头颜色时遇到问题，如果我删除我就没有箭头。

我试图设置 border:1px 实体；对于#talkbubble:before 但这不起作用。

我想要这样的东西http://i.imgur.com/GYcrzuo.jpg，但我无法解决。

HTML:

<div id="talkbubble">
</div>

CSS:

#talkbubble {
    margin-top:20px;
    margin-left:50px;
   width: 120px;
   height: 80px;
   background: none;
    border:1px solid;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

Answer 1

试试这个

div{
  margin: 40px auto;
  border: 2px solid #333;
  width: 20px;
  height: 20px;
  position:relative;
  border-radius: 5px;
  border-left: 2px solid transparent
}
div:before{
  content:'';
  position: absolute;
  width: 4px;
  height:4px;
  border-left:2px solid #333;
  border-bottom: 2px solid #333;
  left: -4px;
  top: 7px;
  transform: rotate(45deg)
}
div:after {
  content: '';
  position: absolute;
  top: 0px;
  left: -1px;
  width: 2px;
  height: 7px;
  box-shadow: 0 13px #333;
  background: #333;
}

<div></div>

为什么我不能将边框设置为工具提示上的箭头 div

Why I can't set border to arrow on tooltip div

html

css

css-shapes