css三角_文本提示框

最新推荐文章于 2023-01-10 13:55:28 发布

友人C君~

最新推荐文章于 2023-01-10 13:55:28 发布

阅读量213

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/CWH0908/article/details/89024622

版权

CSS 专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
    .angle{
      width:0px;
      border:20px solid;
      border-top-color:transparent;
      border-bottom-color:transparent;
      border-left-color:red;
      border-right-color:transparent;
    }
</style>
</head>
<body>
	<div class="angle"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本提示框</title>
<style>
	
.tip1,.tip2{
    width: 20px;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent red transparent transparent;
    position:relative;
    text-overflow:ellipsis;
  }

.tip2{
	border-color: transparent greenyellow transparent transparent;
}

.content1,.content2{
  position:absolute;
  top:-20px;
  left:40px;
  width: 200px;
  height: 40px;
  background:red;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.content2{
	background: greenyellow;
}

</style>
</head>
<body>

  <div class="tip1">
    <div class="content1">
       我是文本提示框1
    </div>  
  </div>
  
  <br />
  
  <div class="tip2">
    <div class="content2">
       我是文本提示框2
    </div>  
  </div>

</body>
</html>