Question

我创建了工具提示div，我想在没有背景的情况下制作，我删除了背景颜色，但我解决了删除箭头颜色的问题，如果我删除了我没有箭头。

我试图设置边框：1px solid;对于#talkbubble：之前但是没有用。

我想要这样的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上设置边框到箭头

1 个答案: