思路：创建一个方形div，分别用css控制div的两个伪元素平移到正方形相邻两边，圆形与边中点重合。最后将总的div旋转45度
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display:inline-block;
margin:50px;
height: 100px;
width: 100px;
background-color: red;
transform: rotate(-45deg);
}
div:before,div:after{
display:block;
content:"";
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
margin-top:-50%;
}
div:after{
margin-left:50%;
}
</style>
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
原文链接：https://www.qiquanji.com/post/8302.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知