实现文章标注效果(类似对话框的气泡边角)

本文代码取自精通CSS高级web标准解决方案(第三版)第六章

先上实现效果

CSS代码

            .main{
                width: 800px;
                margin: 30px auto;
            }
            aside{
                position: absolute;
                margin-top: -200px;
                margin-left: -150px;
                border: 1px solid #dcf0ff;
                border-radius: 99em;
                background-color: #dcf0ff;
                padding: 4px 4px;
            }
            aside::after{
                content: '';
                display: block;
                width: 0;
                height: 0;
                border: .5em solid #dcf0ff;
                border-bottom-color: transparent;
                border-right-color: transparent;
                position: absolute;
                right: -1em;
                top: .3em;
            }

HTML代码

      <div class="main">
          <P>
                胡歌，1982年9月20日出生于上海市徐汇区，中国内地男演员、歌手。
                1996年，14岁的胡歌便成为上海教育电视台的小主持人，2005年毕业于上海戏剧学院表演系，同年在仙侠剧《仙剑奇侠传》中塑造了“李逍遥”一角，并演唱该剧插曲《六月的雨》《逍遥叹》 [1-2]  。
                2006年8月遭受严重车祸，2007年6月复出 [3]  。2009年主演仙侠剧《仙剑奇侠传三》 [4]  ，并演唱片尾曲《忘记时间》 [5]  。2010年主演的穿越剧《神话》在央视八套播出 [6]  。
                2011年参演历史题材电影《辛亥革命》提名大众电影百花奖“最佳新人奖” [7-8]  。2012年主演玄幻剧《轩辕剑之天之痕》 [9]  。2013年主演两部话剧，凭借《如梦之梦》获得北京丹尼国际舞台表演艺术奖“最佳男演员奖” 
                [10]  。2014年参演战争剧《四十九日·祭》提名上海电视节白玉兰奖“最佳男配角奖” [11-12]  。2015年主演的谍战剧《伪装者》、古装剧《琅琊榜》、都市剧《大好时光》相继播出，获得中国电视剧飞天奖“优秀男演员提名
                奖”、上海电视节白玉兰奖“最佳男主角奖”、中国电视金鹰奖“观众喜爱的男演员奖”、中国金鹰电视艺术节“最具人气男演员奖”等奖项 [13-17]  。2016年成为上海旅游形象大使，登上央视春晚演唱歌曲《相亲相爱》 [18-19]  
                。2017年二度登上央视春晚演唱歌曲《在此刻》，获得共青团中央“全国向上向善好青年”崇义友善好青年称号，2018年凭借都市剧《猎场》二度提名上海电视节白玉兰奖“最佳男主角奖” [20-23]  。
                2019年，主演的刁亦男执导电影《南方车站的聚会》入围戛纳国际电影节主竞赛单元。 [24]
          </P>
          <aside>我可是一条批注</aside>

实现原理

创建一个0像素的块，边框是0.5em，边框也只显示左、上边框。浏览器就只渲染出一个三角形。然后把三角形定位到评注气泡的右上角位置。