Home  >  Article  >  Web Front-end  >  How to create a variety of different graphic shapes using CSS

How to create a variety of different graphic shapes using CSS

高洛峰
高洛峰Original
2017-03-21 17:34:301896browse

introduce

We learn how to use simple CSS to create different types of flat graphics.

Use code

Rectangle

How to create a variety of different graphic shapes using CSS

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

<p></p>

triangle

How to create a variety of different graphic shapes using CSS

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

<p></p>

Oval

How to create a variety of different graphic shapes using CSS

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

<p></p>

Crescent shape

How to create a variety of different graphic shapes using CSS

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

<p></p>

Leaves

How to create a variety of different graphic shapes using CSS

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

<p></p>

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn