我想制作一个带边框半径的角落div

Question

我希望制作类似这样的东西

红色区域内不能有div，因为我正在进行碰撞测试。我需要一个div来让我做一个＆＃34;墙＆＃34;所以我的角色不能在div内移动，但他可以在红色区域内移动。我正在制作吃豆人的游戏。

我目前的CSS是......

div.wall{
    border: 1px solid white;
    border-radius: 1000px;
}
div#bottomLeftCornerVertical{
    position: fixed;
    left: 175px;
    width: 25px;
    height: 75px;
    top: 473px;
}
div#bottomLeftCornerHorizontal{

}

div.wall将用于我的所有墙壁，下一个用于垂直部分，下一个用于空白部分（空的）用于此角落的水平部分。

Answer 1

您可以依靠伪元素和一些边框来创建它：

＆＃13;

＆＃13;

.wall-top {
  margin-top:20px;
  width:50px;
  height:100px;
  border:1px solid;
  border-bottom:none;
  border-radius:20px 20px 0 0;
  position:relative;
}
.wall-top:before {
  content:"";
  position:absolute;
  height:40px;
  left:-1px;
  top:100%;
  border-left:1px solid;
}
.wall-bottom {
  margin-top:40px;
  width:200px;
  height:30px;
  border:1px solid;
  border-top:0;
  border-radius:0 0 20px 20px;
  position:relative;
}
.wall-bottom:before {
  content:"";
  position:absolute;
  top:-20px;
  height:20px;
  width:50px;
  right:-1px;
  border-top:1px solid;
  border-right:1px solid;
  border-radius:0 20px 0 0;
}
.wall-bottom:after {
  content:"";
  position:absolute;
  top:-40px;
  height:20px;
  width:100px;
  left:50px;
  border-bottom:1px solid;
  border-left:1px solid;
  border-radius:0 0 0 20px;
}

＆＃13;

<div class="wall-top">
</div>
<div class="wall-bottom">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

解决方案＃1 ：您可以使用此代码在div内制作画布，并在画布内制作游戏

＆＃13;

＆＃13;

#myDiv {
  height:275px;
  width:500px;
  background:black;
  border-radius:10px;
}
#myCanvas {
  display:block;
  background:red;
  width:400px;
  height:175px;
  border-radius:0 10px 0 10px;
  transform:translate(100px,0px);
  /*Or however much you need to move it*/
}

＆＃13;

<div id="myDiv"><canvas id="myCanvas"></canvas></div>

＆＃13;

＆＃13;

＆＃13;

解决方案＃2 ：如果您打算使用其他方式制作游戏，您可以制作这样的表格。

＆＃13;

＆＃13;

#content{
  background:red;
  width:100px;
  height:100px;
  border-radius:0 10px 0 10px;
}
#side{
  background:black;
  width:20px;
  height:20px;
  border-radius:10px 0 0 0;
}
#bottom{
  background:black;
  width:20px;
  height:20px;
  border-radius:0 0 10px 10px;
}
table{
  border-collapse:collapse;
  background:black;
  border-radius:10px;
 }

＆＃13;

<table>
<tr>
<td id="side"></td>
<td id="content"></td>
</tr>
<tr>
<td id="bottom" colspan="2"></td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;