如何实现图片的角标呢?

怎么实现这种图片的角标呢?要能动态改变角标的值。。。
已邀请:

yupengmail2012

赞同来自:

就加一个结构上去嘛~css3 可以使用:after

xtbda

赞同来自:

使用伪类应该是不错的

bookseto

赞同来自:

如楼上几位所说,使用::after ::before伪元素可以的。当然了不使用伪元素也可以比如设置定位,例如我们所用的segmentfault网站通知一样

juanpingzhao

赞同来自:

看你项目需要支持到ie多少
考虑低级别ie的话,建议增加一个 通过定位啥的,固定到右上角

如果不需要,建议使用::after ::before等伪元素,还能使用border-radius实现圆角

移动端的话,直接伪元素吧

xtbda

赞同来自:

<div data-num='22' id="a1">33333</div>
            #a1 {
                width: 200px;
                height: 200px;
                background-color: #333;
                color: #fff;
                position: relative;
                margin-top: 50px;
            }
            
            #a1:after {
                content: attr(data-num);
                line-height: 50px;
                text-align: center;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: red;
                position: absolute;
                top: -20px;
                right: -20px;
            }
                $('#a1').click(function() {
                    var n = $("#a1").attr('data-num');
                    $("#a1").attr('data-num', ++n);
                });
                //                $('#a1').click(function() {
                //                    console.log($("#a1").data('num'));
                //                    $("#a1").data('num', '3333');
                //                    console.log($("#a1").data('num'));
                //                });

伪类做的,动态赋值也顺手写了

要回复问题请先登录注册