链接
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
article {
margin-left: 10rem;
}
aside {
width: 5rem;
padding: 1rem;
color: white;
background-color: pink;
border-radius: 0.5rem;
position: absolute;
//left: 1rem;
margin-left: -9rem;
}
aside:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 0.5rem solid pink;
border-bottom-color: transparent;
border-right-color: transparent;
right: -1rem;
top: 0.5rem;
}
.note {
color: green;
text-decoration-line: underline;
}
</style>
</head>
<body>
<section>
<article>
<p>煮豆燃豆萁，</p>
<p>豆在釜中泣。</p>
<p>本是同根生，</p>
<aside>豆秸怎能这样急迫地煎熬豆子呢？</aside>
<p class='note'>相煎何太急？</p>
</article>
</section>
</body>
</html>
