要创建一个带有箭头的警示对话框，可以使用JavaScript和CSS来实现。以下是一个示例代码：

HTML代码：

显示警示对话框


  

  

    
警告！
    
这是一个警示对话框。
    关闭
  

CSS代码：

.hide {
  display: none;
}

#alertBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#alertBox .arrow {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  transform: rotate(45deg);
}

#alertBox .content {
  margin-top: 10px;
}

#alertBox h3 {
  margin: 0;
}

#alertBox p {
  margin: 10px 0;
}

JavaScript代码：

function showAlert() {
  document.getElementById('alertBox').classList.remove('hide');
}

function hideAlert() {
  document.getElementById('alertBox').classList.add('hide');
}

这段代码创建了一个按钮，在点击按钮后显示一个带有箭头的警示对话框。警示对话框包含一个标题、一段文本和一个关闭按钮。点击关闭按钮后，警示对话框会隐藏起来。CSS样式中使用了绝对定位和transform属性来实现箭头的位置和旋转效果。JavaScript代码中的showAlert()和hideAlert()函数分别用于显示和隐藏警示对话框。