<!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-radius 属性允许您为元素添加圆角边框! </div>
</body>
</html>
-- 运行结果
更多推荐
CSS 伪类after ,制作反方向圆角
发布评论