<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.antzone {
margin: 200px;
border: 1px solid black;
width: 100px;
height: 40px;
position: relative;
border-radius: 5px;
}
.antzone:before {
border: 8px solid transparent;
border-top-color: black;
position: absolute;
content: "";
left: 50%;
top: 100%;
margin-left: -8px;
}
.antzone:after {
border: 8px solid transparent;
border-top-color: #FFFFFF;
position: absolute;
content: "";
left: 50%;
top: 100%;
margin-left: -8px;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>
css圆角矩形+底部三角
于 2022-08-30 16:53:38 首次发布