Sample code for displaying reminder dots in the upper left or upper right corner using CSS3

Effect picture (if you want a triangle, please click here):

Code:

<html>
<head>
    <style type="text/css">
        .message_s {
            position: relative;
            cursor: pointer;
        }
 
            .message_s:after {
                position: absolute;
                content: "";
                /*The following content can be adjusted according to actual needs-----start------*/
                top: 0px;
                left: -13px; /*Change to: right: -13px; The dot is displayed on the right*/
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #e98b7f;
                /*-----end------*/
            }
 
        div {
            height: 30px;
            border: 1px #000 solid;
            width: 300px;
            line-height: 30px;
            padding: 0px 0px 0px 15px;
        }
    </style>
    <script>
        function clickAction()
        {
            console.log("If Heaven had not given me a leader, the road of keys would have been long as night!");
        }
    </script>
</head>
<body>
    <div>
        <span class="message_s" onclick="clickAction()"></span>
        Sword Opens the Gate of Heaven
</body>
</html>

Appendix: Let’s look at the red triangle icon in the upper left corner.

The red triangle mark is implemented in the upper left corner, as shown in the figure

It is implemented using pseudo-classes, focusing on position, transform, and border attributes.

To adjust the position, just modify the values of top and left.

<html>
<head>
<title> New Document </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: 16px solid transparent;
            content: "";
            -webkit-transform: rotate(45deg);
        }
 
        .message_s:after {
            left: -25px;
            z-index: 0;
            border-right-color: red;
        }
</style>
</head>
<body>
<div>
    <span class="message_s">Internet Explorer 10, Firefox, and Opera support the transform attribute. Internet Explorer 9 supports the alternative -ms-transform property (for 2D transforms only). Safari and Chrome support the alternative -webkit-transform property (3D and 2D transforms). Opera only supports 2D transitions. </span>
</div>
</body>
</html>

This concludes this article about how to use CSS3 to display reminder dots in the upper left or upper right corner. For more relevant CSS3 reminder dots content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of JavaScript program loop structure

>>: Detailed explanation of docker visualization graphics tool portainer