<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*三角形画法 下三角*/
/*div{
width:0px;
height:0px;
border: 50px solid transparent;
border-bottom: 50px solid pink;
}*/
*{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 100px;
height: 50px;
background: orange;
margin: 100px auto 0;
}
div:before{
/*只有伪元素 才用加*/
content: "";
display: block;
position: absolute;
left: 0px;
top: -100px;
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 50px solid orange;
}
div:after{
content: "";
display: block;
position: absolute;
left: 0;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid orange;
}
p{
width: 100px;
height: 100px;
margin: 100px auto 0;
/*如果去掉这个 就会变成 月牙的形状*/
/*border: 50px solid transparent;*/
border-left: 10px solid red;
border-top: 10px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
