使用CSS画出“鹰嘴”消息框

版权声明:本文为博主原创文章,可以转载不可复制。 https://blog.csdn.net/qq_32331073/article/details/83995095

必须明白radius可以设置为两个值,宽半径、高半径,如果只设置为一个值,则宽半径 = 高半径

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
#parent{
	 position:absolute;
     top:100px;
	 left:100px;
     right:0px;
}
#content{
	 display:inline-block;
	 background-color:blue;
	 border-radius:5px;
	 padding:20px
}
#content::before
{   
	content:'';
    border-bottom: 15px solid blue;
    border-left: 0px solid blue;
    border-bottom-left-radius: 20px 20px;	
	height:20px;
	width:20px;
	position:absolute;
	top:5px;
    left:-15px;
}	
</style>
</head>
<body>
	<div id="parent">
		<div id="content">asd</div>
	</div>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_32331073/article/details/83995095