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

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');
         tooltip.style.display = 'block';
   }
   function hideTips(){
         var tooltip = document.getElementsByClassName('tips');
         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 {

真·尼古拉斯大佬

页: [1]

吾爱破解 - 52pojie.cn's Archiver

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