CSS3实现左上角或右上角显示提醒圆点的示例代码
网站建设 2023-01-28 21:39www.1681989.com免费网站
效果图（如果想要三角形请点击这里）
代码
<html>
<head>
<style type="text/css">
.message_s {
position: relative;
cursor: poter;
}
.message_s:after {
position: absolute;
content: "";
/以下内容可以根据实际需要进行调整 -----start------/
: 0px;
left: -13px; /改成right: -13px; 圆点显示在右侧/
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #e98b7f;
/-----end------/
}
div {
height: 30px;
border: 1px #000 solid;
width: 300px;
le-height: 30px;
paddg: 0px 0px 0px 15px;
}
</style>
<script>
function clickAction()
{
console.log("天不生我leader，键道万古长如夜！");
}
</script>
</head>
<body>
<div>
<span class="message_s" onclick="clickAction()"></span>
剑开天门
</div>
</body>
</html>
附录狼蚁网站SEO优化看下左上角实现红色三角号标识
左上角实现红色三角号标识，如图
利用伪类实现，position和transform、border属性为重点。
位置调整修改和left的值即可。
<html>
<head>
<title> New Document </title>
<style>
div {
background-color: #f4f4f4;
paddg: 20px;
}
.message_s {
position: relative;
}
.message_s:after {
position: absolute;
: -25px;
display: block;
width: 0;
height: 0;
border: 16px solid transparent;
content: "";
-webkit-transform: rotate(45deg);
}
.message_s:after {
left: -25px;
z-dex: 0;
border-right-color: red;
}
</style>
</head>
<body>
<div>
<span class="message_s">Inter Explorer 10、Firefox、Opera 支持 transform 属性。Inter Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。</span>
</div>
</body>
</html>
到此这篇关于CSS3实现左上角或右上角显示提醒圆点的示例代码的文章就介绍到这了,更多相关css3提醒圆点内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！