Creating puzzle pieces on borders

I am trying to make the middle of the specific fieldsets borders. I am not quite sure what I am doing here, would appreciate some help :+1:

I have sketched out what I am trying to achieve below aswell as my source code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A template programmed with html and css that can be used potentially by Andrew Turner when blogging for business and/or personal reasons" />
<link rel="stylesheet" href="TurnerBlog.css" />
<!-- get a favicon -->
<link rel="icon" type="image/x-icon" href=/>
<title> TurnerBlogTemplate </title>
</head>
<body>
<div id="container">
<div id="red">
<fieldset id="red">
<span id="rbp"></span>
<span id="rrp"></span>
</fieldset>
</div>
<div id="yellow">
<fieldset id="yellow">
<span id="ybp"></span>
</fieldset>
</div>
<div id="blue">
<fieldset id="blue">
</fieldset>
</div>
<div id="green">
<fieldset id="green">
<span id="glp"></span>
</fieldset>
</div>
</div>
</body>
</html>
body{
	background-color: black;
}
#container{
	border-width: 18px;
	border-left-color: ;
	border-right-color: ;
	border-bottom-color: ;
	color: white;
	width: 780px;
	height: 550px;
	margin-left: 230px;
	position: relative;
    top: 45px;
}
#red{
	border-top-width: 15px;
	border-left-width: 15px;
	border-bottom-color: red;
	border-right-color: red;
	border-left-color: red;
	border-top-color: red;
	height: 260px;
	width: 353px;
	float: left;
	position: relative;
	right: 10px;
	bottom: 5px;
	border-radius: 0, 30px, 30px, 0;
	z-index: -1;
}
#yellow{
	border-top-width: 15px;
	border-right-width: 15px;
	border-bottom-color: yellow;
	border-right-color: yellow;
	border-left-color: red;
	border-top-color: yellow;
	z-index: -2;
	height: 260px;
	width: 384px;
	float: right;
	position: relative;
	bottom: 5px;
	left: 10px;
}
#green{
	border-bottom-width: 15px;
	border-right-width: 15px;
	border-left-color: green;
	border-bottom-color: green;
	border-right-color: green;
	border-top-color: yellow;
	z-index: -3;
	float: bottom;
	position: relative;
    left: 186px;
	height: 280px;
	width: 383px;
}
#blue{
	border-bottom-width: 15px;
	border-left-width: 15px;
	border-bottom-color: blue;
	border-left-color: blue;
	border-top-color: red;
	border-right-color: green;
	height: 280px;
	width: 355px;
	float: bottom;
	position: relative;
	top: 10px;
	right: 11px;
}

Not sure what you mean. If you’re trying to just get the shape of the puzzle pieces, you could add extra divs and style them individually. I tried messing with your code but it’s a little dense for me to quickly parse, so I made my own example for you to hopefully see what I mean.

HTML:

<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>

CSS:

* {
  box-sizing: border-box;
  position: absolute; /* applies to all divs in this example */
}

#foo {
  /* position */
  top: 50px;
  left: 50px;
  /* size */
  height: 100px;
  width: 100px;
  /* color */
  background-color: rgb(200,200,200);
  border: 1px solid black;
  /* for fun */
  border-radius: 25px;
}

#bar {
  /* position */
  top: 50px;
  left: 250px; /* farther from left */
  /* size */
  height: 100px;
  width: 100px;
  /* color */
  background-color: rgb(200,200,200);
  border: 1px solid black;
  /* for fun */
  border-radius: 25px;
}

#baz {
  /* position */
  top: 75px;
  left: 149px; /* -1px to cover the 1px border */
  /* size */
  height: 50px;
  width: 102px; /* +2px to cover the 1px border (on both sides) */
  /* color */
  background-color: rgb(200,200,200);
  border-top: 1px solid black; /* use border-top and border-bottom to only modify those edges */
  border-bottom: 1px solid black;
  /* explicitly make this element display on top of others */
  z-index: 2;
}

In my example, #baz is styled to cover up the borders of the other divs to make all three divs look like they have one border. Maybe you could use a similar idea to make your own puzzle piece cutouts?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.