在顶角放置一个通知计数的圆圈

Question

任何html技术都可以在矩形div的右上方放置循环通知，例如下面的图片

Answer 1

FIDDLE （稍微updated）

HTML

<div></div>

CSS

div{
    display:inline-block;
    height:100px;
    width:300px;
    border:1px solid grey;        
    position:relative;
}
div:after{
    content:'1';
    position:absolute;
    right:0;
    border-radius:99px;
    border:1px solid blue;
    height:20px;
    width:20px;
    text-align:center;
}

Answer 2

执行以下操作：http://jsfiddle.net/B6pTd/

诀窍是相对和绝对定位。边界半径只是为了好玩。通常您需要发布您尝试过的解决方案。

这是html：

<div class='container'>
  <div class='box'>
    <div id='noti-count'><div>2</div></div>
  </div>
</div>

然后是css：

.container {
  background-color:#000;
  padding:20px;
}
.box {
  width:200px;
  height:100px;
  background-color:#555;
  border:#aaa;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin:20px;
  position:relative;
}
#noti-count {
  position:absolute;
  top:-15px;
  right:-15px;
  background-color:blue;
  color:#fff;
  padding:5px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  width:30px;
  height:30px;
  text-align:center;
}
#noti-count div {
  margin-top:7px;
}

Answer 3

您可以对嵌套在矩形div中的圆形元素使用绝对定位。另一种方法可能是使用：after或：before而不是矩形中的嵌套元素。