This is the 12th day of my participation in the August Text Challenge.More challenges in August

Using CSS, you can draw many shapes, such as triangles, trapezoids, circles, ellipses, etc. You can draw not only rectangles, but also hearts, diamonds, eggs, Pac-Man, chat boxes, ICONS, etc. Here’s how to implement these shapes. Divided into basic shape and combined shape, the basic shape is relatively easy to achieve, and use these basic shapes to combine, you can achieve a slightly more complex combined shape.

The diamond

It’s a square rotated by 45 degrees

/ * * / diamond
.diamond {
    width: 100px;
    height: 100px;
    background: #F7DE1F;
    transform: rotate(45deg);
}
Copy the code

Diamond shield

/* Diamond shield */
.diamond-shield {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 20px solid #F7DE1F;
    top: -50px;
}
.diamond-shield::after {
    position: absolute;
    content: "";
    top: 20px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #F7DE1F;
}
Copy the code

Diamond Narrow

It’s a combination of two positive and negative triangles

/* Diamond Narrow */
.diamond-narrow {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid #F7DE1F;
    top: -50px;
}
.diamond-narrow::after {
    position: absolute;
    content: "";
    top: 70px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #F7DE1F;
}
Copy the code

Diamond shaped

A trapezoid on the top and a triangle on the bottom

/* Diamond */
.cut-diamond {
    position: relative;
    width: 50px;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #F7DE1F transparent;
    border-width: 0 25px 25px 25px;
    margin: 20px 0 50px 0;
}
.cut-diamond::after {
    position: absolute;
    content: "";
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #F7DE1F transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
Copy the code

egg

/ * * / eggs
.egg {
    display: block;
    width: 126px;
    height: 180px;
    background: #F7DE1F;
    border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
}
Copy the code

pac-man

/* Pac-Man */
.pacman {
    width: 0;
    height: 0;
    border: 60px solid #F7DE1F;
    border-right-color: transparent;
    border-radius: 60px;
}
Copy the code

A chat

/* Chat box */
.talkbubble {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    background: #F7DE1F;
}
.talkbubble::after {
    position: absolute;
    content: "";
    top: 26px;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 26px solid #F7DE1F;
}
Copy the code

The television screen

/* TV screen */
.tv {
    position: relative;
    width: 200px;
    height: 150px;
    background: #F7DE1F;
    border-radius: 50% / 10%;
}
.tv::before {
    position: absolute;
    content: "";
    top: 10%;
    bottom: 10%;
    left: -5%;
    right: -5%;
    background: inherit;
    border-radius: 5% / 50%;
}
Copy the code

(For attention)

Welcome to follow my official account: Class A Coder and get daily dry goods push. Thank you again for reading. I’m Han the Programming Monkey