CSS Halloween: Docker Kong?
Tags: css
Published: 2021-10-08 14:51:04

Last year I made some [Halloween characters faces](https://dev.to/jarvisscript/css-halloween-faces-4lo3) using CSS. Then for Christmas I made [Ugly Sweaters](https://dev.to/jarvisscript/ugly-sweater-css-36am). Now that's it's October I'm putting them together for ugly Halloween sweaters.

I'm reusing the main sweater body from last year. But changing the color to fit the Halloween theme. 


![ugly black sweater. it has a row white stitching to make boxes. under that a row of alternating square of orange and white.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3fry4f8avukgih8i9rx.jpg)

This is how we left the sweater last time. [Click to see how it was made.](https://dev.to/jarvisscript/return-of-css-halloween-4idg) A black background with a row of white boxes filled with bats and eyes. Under that a row of alternating white and orange boxes. Then a large open area of black followed by a the rows in reverse order.

## Add the Character ##

```html
<div class="torso"> 
.
.
.
   <div class="character">
     <div class="kong"></div>	
   </div character>
.
.
.
</div<
```

```Css
/* CHARACTER    //////////////// */

.character {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute; 
	overflow: visible;
	margin-left: -60px;
}

.kong {
	background-color: #686565;
	height: 200px;
	width: 220px;
	display: flex;
	justify-content: center;
	align-items: center; 
	overflow: visible;
	flex-direction: column;
	border-top-right-radius: 40%;
	border-top-left-radius: 45%;
	border-bottom-right-radius: 48%;
	border-bottom-left-radius: 48%; 
	border: 6px dashed #686565;
	margin-bottom: 80px;
	justify-content: space-between;
}

```
This gives a basic circle that will be the head for King Kong.

![Dark gray circle. circle is slightly squished.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkeyt0qjllijfl968zml.jpg)

```css
.eyes_pair {
    width: 140px;
    height: 90px;
	border-radius: 20%;
	background: #A9A9A9;
	margin-left: -190px;
    margin-top: -121px; 
	display: flex;
    position: relative;
    flex-direction: row-reverse;
    overflow: overlay;
    z-index: 1;
	border: 4px solid #A9A9A9;
	justify-content: space-between;

}
.beard {
	border-top:100px #686565;
	border-right: 100px solid transparent;
	border-bottom: 100px solid transparent;
	border-left: 100px solid transparent; 
	margin-top: 156px;
	z-index: 0;
	display: flex;
	justify-content: space-between;
}

.lines {
	position: relative;
	margin:0 auto;
	margin-top: -170px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-top: 67px solid #000;
    height: 0;
    width: 0;
}
.lines:before {
	border-top: 66px solid #a9a9a9;
    border-left: 66px solid rgba(0, 0, 0, 0);
    border-right: 66px solid rgba(0, 0, 0, 0);
    content: "";
 	left: -66px;
    margin-top: -80px;
    position: absolute;
}
```
This rectangle with `border-radius: 20%.` will be the background for eyes. The triangle of the beard is made by making a rectangle using borders but giving three sides transparent boarders. Notice there is no background color just border colors.

![Gray rectangle with gray triangle overlapping the bottom.  ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzuq8wa877q8vsh2hn0g.jpg)

```css
.Eyes {
	background-color: black;
	height: 54px;
	width: 54px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center; 
	border-top-right-radius: 13%;
    border-top-left-radius: 20%;
    border-bottom-right-radius: -38%;
}


.pupil {
	background-color: white;
	height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-top: -8px;
    margin-right: -4px;
}
```
![Two eyes on a gray face.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df7tidn8u8xq82jlcziy.jpg)

Finally add the mouth and nose. They are the same HTML I used on the [wampa](https://dev.to/jarvisscript/ugly-sweater-css-winter-wampa-land-360j). Nose is just two gray circles with a black circle inside.

 ```html
<div class="nostrils">
  <div class="nostrilsInside"></div>
</div>
<div class="nostrils">
   <div class="nostrilsInside"></div>
</div>
```
```css
.nostrils {
	width: 25px;
    height: 25px;
    background-color: #A9A9A9;
    border: solid 2px black;
    border-radius: 50%;
    margin-top: -90px;
    margin-left: -63px;
    z-index: 7;
    display: flex;
    justify-content: center;
}

.nostrilsInside {
	width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
 	margin-top: 3px;
    z-index: 4;
}

.fangs {
	width: 25px;
    height: 33px;
	margin-top: -50px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	border: solid 1px black;
}

.fangs_bottom {
	width: 25px;
    height: 33px;
	margin-bottom:  -50px;
	background: #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	border: solid 1px black;
}
```
 ![King Kong face. The fur is gray.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qlmlqwnhyen83q3nyb9.jpg)

If you want to see my other CSS creations look here, [Halloween characters faces](https://dev.to/jarvisscript/css-halloween-faces-4lo3) and [Ugly Sweaters](https://dev.to/jarvisscript/ugly-sweater-css-36am).
```
-$JarvisScript git push
```