CSS3如何实现左上角或右上角显示提醒圆点

tangjin

作者

本文将为大家详细介绍“CSS3如何实现左上角或右上角显示提醒圆点”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“CSS3如何实现左上角或右上角显示提醒圆点”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

效果图（如果想要三角形请点击这里）：

代码：

<html>
<head>
<styletype="text/css">
.message_s{
position:relative;
cursor:pointer;
}

.message_s:after{
position:absolute;
content:"";
/*以下内容可以根据实际需要进行调整-----start------*/
top:0px;
left:-13px;/*改成：right:-13px;圆点显示在右侧*/
width:8px;
height:8px;
border-radius:50%;
background-color:#e98b7f;
/*-----end------*/
}

div{
height:30px;
border:1px#000solid;
width:300px;
line-height:30px;
padding:0px0px0px15px;
}
</style>
<script>
functionclickAction()
{
console.log("天不生我leader，键道万古长如夜！");
}
</script>
</head>
<body>
<div>
<spanclass="message_s"onclick="clickAction()"></span>
剑开天门
</div>
</body>
</html>

附录：下面看下左上角实现红色三角号标识

左上角实现红色三角号标识，如图

利用伪类实现，position和transform、border属性为重点。

位置调整修改top和left的值即可。

<html>
<head>
<title>NewDocument</title>
<style>
div{
background-color:#f4f4f4;
padding:20px;
}

.message_s{
position:relative;
}

.message_s:after{
position:absolute;
top:-25px;
display:block;
width:0;
height:0;
border:16pxsolidtransparent;
content:"";
-webkit-transform:rotate(45deg);
}

.message_s:after{
left:-25px;
z-index:0;
border-right-color:red;
}
</style>
</head>
<body>
<div>
<spanclass="message_s">InternetExplorer10、Firefox、Opera支持transform属性。InternetExplorer9支持替代的-ms-transform属性（仅适用于2D转换）。Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）。Opera只支持2D转换。</span>
</div>
</body>
</html>

如果你能读到这里，小编希望你对“CSS3如何实现左上角或右上角显示提醒圆点”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-03-17 20:51:21

css3