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

Question

我想做这样的事情

红色区域内不能有div，因为我正在进行碰撞测试。我需要一个div来允许我做一个“墙”，这样我的角色就​​不能在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

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

#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*/
}

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

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

#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;
 }

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

Answer 2

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

.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;
}

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