Question

我想创建一个带有圆圈的框（其中心位于框的右上角）放在框的顶部，如下图所示：

我知道如何创建一个圆圈和一个盒子，但是我希望彼此重叠，并且它们的重叠区域不应该显示边框。怎么可能这样做？

有谁能请告诉我哪种方式更容易创建。通过CSS或使用JavaScript。如果可能的话也会指导我编码。

Answer 1

可以使用绝对定位

以这种方式创建

＆＃13;

.rect {
  width: 400px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
  top: 50px;
  left: 50px;
}
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
}
.fixrect {
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: white;
  width: 60px;
  height: 60px;
  top: 50px;
  left: 50px;
  position: absolute;
}

＆＃13;

<html>

<body>
  <div class="circle"></div>
  <div class="rect"></div>
  <div class="fixrect"></div>
</body>

</html>

＆＃13;

您可以找到笔here

Answer 2

littel有点困难。但试试这个

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.circle{
		width: 300px;
		height: 300px;
		border:1px solid black;
		border-radius: 150px;
		
	}

	.rectan{
		width: 600px;
		height: 400px;
		border:1px solid black;
		position: absolute;
		left:150px;
		top: 150px;
	}

	.white{
		width: 160px;
		height: 160px;
		background-color: white;
		border:2px solid white;
		position: absolute;
		left: -1px;
		top: -1px;

	}
</style>
<body>
 

 <div class="circle"></div>
 <div class="rectan">
 	<div class="white"></div>
 </div>
</body>
</html>

使用图像是我认为最好的

要创建圆形和框，如下图所示

2 个答案: