div标签增加右上角删除图标

一、需求描述

在Div标签的右上角显示删除图标

二、实现方式

html、CSS

三、参考代码

<style>

.container{

        width:60px;

        height:60px;

        border: 1px dotted red;

        position:relative;

}

.content{

        position:relative;

        top:20px;

}

.delete{

        width:20px;

        height:20px;

        border-radius:60%;

        position:absolute;

        top:-10px;

        right:-10px;

}

</style>

<div class="container">

        <img src="http://www.iconpng.com/download/png/61252" class="delete" οnclick="alert(1)"/>

        <div class="content">content</div>

</div>

<div class="container">

        <img src="http://www.iconpng.com/download/png/61252" class="delete"/>

        <div class="content">content</div>

</div>