怎么让一个div变成镂空的圆形或者小半圆呢？就是这种 ⭕️ ，或者只要他的一半或者三分之一等等


.box1{
  width:100px;
  height:5px;
  border-radius:5px;
  background-color:red;
}


<div class="box1"></div>

img

.box1{
  width:100px;
  height:5px;
  border-radius:5px;
  border:2px solid red;
}

img

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box1{
          width:100px;
          height:50px;
          border-top-left-radius: 100px;
          border-top-right-radius: 100px;
          border:2px solid red;
          border-bottom: none;
        }


    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>