如图，这个带箭头的边框怎么做出来

Samding · 发表于 2020-1-28 13:05

本帖最后由 Samding 于 2020-1-28 14:39 编辑

用CSS做

whf2012 · 发表于 2020-1-28 13:20

这不是一个图片？

默默看着你 · 发表于 2020-1-28 13:46

提示: 作者被禁止或删除内容自动屏蔽

打工仔-知恩 · 发表于 2020-1-28 13:50

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提示框</title>
<style type="text/css">
      .tips {
         width: 180px;
         border: 1px solid #808080;
         margin-top: 7px;
         padding: 7px;
         position: relative;
         font-size: 0.8rem;
         display: none;
      }
      .triangle em{
         position: absolute;
         width: 0px;
         height: 0px;
         border: 10px dashed #808080;
         border-color: transparent transparent #808080 transparent;
         left: 10px;
         top: -20px;
      }
      .triangle span{
         position: absolute;
         width: 0px;
         height: 0px;
         border: 10px dashed #808080;
         border-color: transparent transparent white transparent;
         left: 10px;
         top: -19px;
      }
</style>
<script type="text/javascript">
      function showTips(){
         var tooltip = document.getElementsByClassName('tips')[0];
         tooltip.style.display = 'block';
      }
      function hideTips(){
         var tooltip = document.getElementsByClassName('tips')[0];
         tooltip.style.display = 'none';
      }
</script>
</head>
<body>
<div>
<input placeholder='请输入文字' onfocus="showTips();" onblur="hideTips();" />
<div class='tips'>
      <div class="triangle"><em></em><span></span></div>
      只能输入小写字母、数字、下划线，不允许其他字符
</div>
</div>
</body>
</html>

打工仔-知恩 · 发表于 2020-1-28 13:54

whf2012 发表于 2020-1-28 13:20
这不是一个图片？

他可能在做表单验证那块儿，需要这样的css样式提示框。

qaz003 · 发表于 2020-1-28 18:10

感觉沙发说对了，应该是文字背景套个图就是了

whf2012 · 发表于 2020-1-29 09:37

打工仔-知恩发表于 2020-1-28 13:50
提示框

.tips {

真·尼古拉斯大佬

帐号		自动登录	找回密码
密码			注册[Register]

默默看着你默默看着你当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	3^# 默默看着你发表于 2020-1-28 13:46 吾爱破解论坛没有任何官方QQ群，禁止留联系方式，禁止任何商业交易。提示: 作者被禁止或删除内容自动屏蔽
	如何升级？如何获得积分？积分对应解释说明！
	回复支持举报

[求助] 如图，这个带箭头的边框怎么做出来