如何设计带有右上角图标的 div？

Question

谁能帮我设计一个带有右上角图标的div？

我需要为此编码。

我在此附上示例图片供您参考。

Answer 1

我看到你已经有了解释如何使用相对和绝对定位的答案，但同时我创建了一个 JS 小提琴 :)

链接到 JS 小提琴示例

HTML：

<div id="box">
  <div id="icon">
    |&gt;
  </div>
  Contents of the box
</div>

CSS：

#box {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 100px;
  background-color: white;
}

#icon {
  background-color: green;
  color: white;
  padding: 10px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  top: -20px;
}