CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 69

I want to make a corner div with a border radius

I am looking to make something like this

enter image description here

There can't be a div inside the red area because I am doing collision testing. I need a div(s) to allow me to make a "wall" so that my character can't move inside the div but he can move within the red area. I am making a game of Pac-Man btw.

My current CSS is...

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

}

Where the div.wall is going to be for all my walls, the next one is for the vertical part and the next one(empty one) is for the horizontal piece of this corner.

Upvotes: 0

Views: 73

Answers (2)

mathmaniac88
mathmaniac88

Reputation: 640

Solution #1: You can use this code to make a canvas inside the div and make the game inside the canvas

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

Solution #2: If you are going to use other means to make the game you can make a table like this.

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

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272901

You may rely on pseudo elements and some border to create this:

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

Upvotes: 2

Related Questions