Create a variety of different graphic shapes using only CSS

introduce

Today, we are going to learn how to use simple CSS to create different types of flat graphics.

Use code

Rectangle

.rectangle {
    width: 250px;
    height: 150px;
    background-color: #6DC75F;
}

<p></p>

triangle

.triangleUp {
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            border-bottom: 150px solid  #6DC75F;
            width: 0;
            height: 0;
        }

<p class="triangleUp"></p>

Oval

.oval {
    width: 300px;
    height: 150px;
    background: #6DC75F;
    -moz-border-radius: 150px / 75px;
    -webkit-border-radius: 150px / 75px;
    border-radius: 150px / 75px;
}

<p class="oval"></p>

Crescent shape

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 green;
}

<p class="moon"></p>

Leaves

.leaf {
    border-radius: 5px 300px 3px 300px;
    background: #6DC75F;
    width: 150px;
    height: 150px;
}

<p class="leaf"></p>

Points of Interest

There are so many amazing things you can do with CSS... Happy coding everyone!

The above is the detailed content of Create a variety of different graphic shapes using only CSS. For more information, please follow other related articles on the PHP Chinese website!