css三角形文本框

<style type="text/css">
      .triangle{/* 三角形图片位置 */
         background-image: url(img/traintop.png);
         width: 20px; 
         height: 20px;
         background-position: center;
         position: relative;
         top: -14px;/* 只需修改这里就可以了 */
         left: 74px;
         background-size: 100%;
         float: left;
      }
      .triangle-box{/* 隐藏底部可修改 */
         background-color: white;
          width: 14px;
          height: 1px;
          float: left;
          top: 13px;
          left: 3px;
          z-index: 0;
          position: relative;
      }
</style>

<body>
   <div style="background-color: transparent; border: 1px #DDDDDD solid; width: 200px; height: 100px;">
   <div class="triangle">
      <div class="triangle-box"></div>
   </div>
   </div>
</body>

图片可以去阿里ico下载 https://www.iconfont.cn/

posted on 2022-03-07 15:03 最帅爸爸阅读(65) 评论(0) 收藏举报