css3右上角小样式,CSS3实现右上角卡片通知提示

.container {

position: fixed;

top: 45px;

right: 4px;

height: 0;

text-align: right;

overflow: visible;

}

.card {

display: inline-block;

max-width: 200px;

line-height: 24px;

padding: 8px 12px;

margin-bottom: 4px;

color: #FFFFFF;

text-align: left;

background-color: #F68C1E;

}

宽度不一

有色区域为真实大小

结构简单

目前这个就是想要的效果，但是要用
来换行，试过

.card::after {

content: "\A";

white-space: pre;

}

但对inline-block的元素没有效果，用inline-block是为了让div适应内容大小而不是铺满父div宽度。

有没有大神可以帮忙实现结构简单的去掉
同样的效果，感激不尽。

预览代码：http://runjs.cn/detail/kjprizbv