cssTriangle：纯CSS实现带三角形的提示框

最新推荐文章于 2022-11-17 19:18:10 发布

AngeloFan3

最新推荐文章于 2022-11-17 19:18:10 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qq_29971465/article/details/108230756

版权

实用收藏同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

入门

使用纯css创建的带有三角形的提示框，可用于展示状态信息等。

引入

创建 cssTriangle.css 文件

/*如需自定义样式，可修改这里的代码*/
:root {
  /*背景颜色*/
  --cssTriangle-background: #4fb16f;
}

/*核心：整体样式(清除浮动)*/
.cssTriangle {
  zoom: 1;
}
/*核心：整体样式(清除浮动)*/
.cssTriangle:after {
  content:"";
  display:block;
  clear:both;
  visibility:hidden;
  height:0
}
/*核心：背景样式*/
.cssTriangle span {
  font-size: 15px;
  line-height: 30px;
  background: var(--cssTriangle-background);
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  position: relative;
  padding: 0 10px;
  margin: 10px;
}
/*核心：三角形样式*/
.cssTriangle span:after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-color: transparent var(--cssTriangle-background) transparent transparent;
  border-width: 12px;
  position: absolute;
  top: 50%;
  right: unset;
  bottom: unset;
  left: -20px;
  margin-top: -12px;
}

/*三角形位置：左侧*/
.cssTriangle.left span {
  float: left;
  margin-top: -4px;
}
.cssTriangle.left:after {
  content: "";
  clear: both;
}
.cssTriangle.left span:after {
  border-color: transparent transparent transparent var(--cssTriangle-background);
  top: 50%;
  right: -20px;
  bottom: unset;
  left: unset;
  margin-left: -12px;
}
/*三角形位置：右侧*/
.cssTriangle.right span:after {
  border-color: transparent var(--cssTriangle-background) transparent transparent;
  top: 50%;
  right: unset;
  bottom: unset;
  left: -20px;
  margin-top: -12px;
}

/*预定义：背景颜色*/
.cssTriangle.green span {
  --cssTriangle-background: #4fb16f;
}
.cssTriangle.orange span {
  --cssTriangle-background: #fc8a26;
}
.cssTriangle.blue span {
  --cssTriangle-background: #4784e3;
}
.cssTriangle.red span {
  --cssTriangle-background: #ec2e38;
}

在 index.html 中引入，并使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带三角形的提示框</title>
    <link rel="stylesheet" href="cssTriangle.css">
</head>

<body>
    <div class="cssTriangle">
        默认的样式
        <span>左侧 绿色</span>
    </div>
</body>

</html>

使用

仅需创建带有 cssTriangle 的class属性的div即可，div内部添加<span>即为提示框的内容

css中预定义了位置与背景色的设定，使用非常方便，仅需在父级的class属性中添加指定的名称，即可快速实现效果

例如：红色背景的左侧提示框

<div class="cssTriangle left red">
    left
    <span>左侧</span>
</div>

最后的效果：

预设的样式

位置

提示框的位置	属性名
位于文字左侧	left
位于文字右侧（默认）	right

背景色

提示框的背景颜色	属性名
绿色（默认）	green
蓝色	blue
橙色	orange
红色	red

如需自定义背景色，可修改css中“--cssTriangle-background”属性的色值；

最后的预览

AngeloFan3

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
cssTriangle：纯CSS实现带三角形的提示框

入门使用纯css创建的带有三角形的提示框，可用于展示状态信息等。引入创建 cssTriangle.css 文件/*如需自定义样式，可修改这里的代码*/:root { /*背景颜色*/ --cssTriangle-background: #4fb16f;}/*核心：整体样式(清除浮动)*/.cssTriangle { zoom: 1;}/*核心：整体样式(清除浮动)*/.cssTriangle:after { content:""; dis..
复制链接

扫一扫