CSS伪类after，制作反⽅向圆⾓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
div
{
position: relative;
margin:0 auto;
padding:10px 40px;
background:#dddddd;
width:200px;
height:100px;
border-radius:25px 25px 0 0;
}
div::after{
position: absolute;
content: '';
width: 30px;
height: 30px;
line-height: 100px;
display: block;
text-align: center;
background-image: radial-gradient(200px at 30px 0px, #fff 30px, #ddd 30px);
top : 90px;
right: -30px;
}
</style>
</head>
<body>div border属性
<div>border-radius 属性允许您为元素添加圆⾓边框！ </div>
</body>
</html>
-- 运⾏结果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。