html边框有箭头,html – 仅限带有箭头和边框的CSS工具提示

样式

.Tooltip {

position: absolute;

z-index:999;

width:200px;

height:57px;

padding:20px;

font-family: "Comic Sans MS", cursive;

font-weight:bold;

font-size:14px;

color:rgba(21,139,204,1);

text-align:justify;

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);

-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);

-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);

background:#dbf3ff;

}

.Tooltip .ArrowWrap {

position:absolute;

margin-top:77px;

margin-left:81px;

height:18px;

width:37px;

overflow:hidden;

}

.Tooltip .ArrowWrap .ArrowInner {

width:25px;

height:25px;

margin:-13px 0 0 6px;

transform: rotate(45deg);

-ms-transform: rotate(45deg); /* IE 9 */

-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */

box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);

-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);

-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);

background:#dbf3ff;

}

说明

我希望我的工具提示箭头不是由工具提示寄存器引起的阻挡三角形,而是我在右图中显示的编辑后的Photoshop版本.