Good web front-end programmers learn to share routes pure css draw various graphics

  Good programmers web front-end route to share learning pure css draw a variety of graphics, very often, UI designer for page look good, we will adopt a lot to do decorative graphics, such as triangles, rectangles, circles, ovals, speech bubbles, etc., so that the entire page does not look too monotonous. As more front-end development time, will be used to achieve relatively quick way is to use a picture or background to achieve the results page, but there is a big problem is the picture may be distorted, in some cases will be found to use pictures or background flexibility is not enough to achieve the effect. So if that is not the picture, using pure CSS also can draw a variety of graphics, a lot of people think css can only write some simple graphics, such as rectangles, squares, circles, ellipses, it is not true, not only the powerful can draw basic css graphics, can also draw some of the more complex, such as love, diamonds, Tai Chi gossip, some speech bubbles and so on. Achieve these effects, the relevant attributes will be used CSS3, we all know css3 property for compatible browser is not very good, so I hope that when the mimic these effects, you can use Chrome and firefox browser open, although IE can also see partial results, but for a better viewing experience, or do not use IE to see, well, ado, take a look at those graphics with CSS rendering it.

1, improved triangle


  CSS core code

  .triangle-up {

    width: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

  }

2, the upper left triangle


CSS core code

.triangle-topleft {

  width: 0;

  border-top: 100px solid red;

  border-right: 100px solid transparent;

}

3, the end of the curved arrow


CSS core code

  .curvedarrow {

    position: relative;

    width: 0;

    border-top: 90px solid transparent;

    border-right: 90px solid red;

    transform: rotate(10deg) translateX(100%);

  }

  .curvedarrow:after {

    content: "";

    position: absolute;

    border: 0 solid transparent;

    border-top: 30px solid red;

    border-radius: 200px 0 0 0;

    top: -120px; left: -90px;

    width: 120px; height: 120px;

    transform: rotate(45deg);

  }

4, Pac-Man


CSS core code:

  .pacman {

    width: 0px; height: 0px;

    border-right: 60px solid transparent;

    border-top: 60px solid red;

    border-left: 60px solid red;

    border-bottom: 60px solid red;

    border-top-left-radius: 60px;

    border-top-right-radius: 60px;

    border-bottom-left-radius: 60px;

    border-bottom-right-radius: 60px;

  }

5, talk bubble with sharp corners


CSS core code:

  .talkbubble {

    width: 120px; height: 80px;

    background: red;

    position: relative;

    border-radius: 10px;

  }

  .talkbubble:before {

    content: "";

    position: absolute;

    right: 100%; top: 26px;

    border-top: 13px solid transparent;

    border-right: 26px solid red;

    border-bottom: 13px solid transparent;

  }

6, bilibili TV


CSS core code

  .tv {

    position: relative;

    width: 200px; height: 150px;

    margin: 20px 0;

    background: red;

    border-radius: 50% / 10%;

    color: white;

    text-align: center;

    text-indent: .1em;

  }

  .tv:before {

    content: '';

    position: absolute;

    top: 10%; bottom: 10%; right: -5%; left: -5%;

    background: inherit;

    border-radius: 5% / 50%;

  }

7, magnifying glass


.magnifying-glass {

  font-size: 10em;

  display: inline-block;

  width: 0.4em; height: 0.4em;

  border: 0.1em solid red;

  position: relative;

  border-radius: 0.35em;

}

.magnifying-glass:before {

  content: "";

  display: inline-block;

  position: absolute;

  right: -0.25em; bottom: -0.1em;

  border-width: 0;

  background: red;

  width: 0.35em; height: 0.08em;

  transform: rotate(45deg);

}

8, pointing to the long graphics


CSS core code:

.pointer {

  width: 200px; height: 40px;

  position: relative;

  background: red;

}

.pointer:after {

  content: "";

  position: absolute;

  left: 0; bottom: 0;

  border-left: 20px solid white;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

.pointer:before {

  content: "";

  position: absolute;

  right: -20px; bottom: 0;

  border-left: 20px solid red;

  border-top: 20px solid transparent;

  border-bottom: 20px solid transparent;

}

  Finally keep small partners emphasize that, because some graphics using some of the properties of CSS3, if you're still using IE, then I suggest you use a modern browser, such as: Mozilla Firefox, Google Chrome, Safari , Opera. Shown above may not be part of the practical effect, but using css to make effective use triangular and round or a lot, especially the effects used to make tips.

Guess you like

Origin www.cnblogs.com/gcghcxy/p/11468629.html