版权声明:本文为博主原创文章,可以转载不可复制。 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>