CSS3 whimsical graphics

Occasionally see a good article that expands a lot on the basis of the original CSS3 graphics creation.

Some methods have been tested and modified, which are summarized here.

 Reference URL: http://sbco.cc/magicCss/html/index.html

【content】

①Heart-shaped

②Bubble triangle

 

 

 

【content】

①Heart-shaped

Use rectangles and inscribed rounded corners to achieve

<style type="text/css">
        .heart{width:160px;height:200px;position:relative;
        /* relative (relative positioning) objects cannot be cascaded and do not leave the document flow, */
      /*Refer to its own static position through top,bottom,left,right positioning, and can be hierarchically graded through z-index*/
        }
        /* after pseudo-element adds content before the element */
        .heart:before{
            content:" ";
            border-radius:100px 100px 0 0;/* The radius of the inscribed circle of the square is equal to half the length of the side of the square*/
            width:80px; height:120px;/* rectangle*/
            background:#669;
            -moz-transform: rotate(-45deg);/* Rotate 45° counterclockwise*/
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            position:absolute;
          /* absolute (absolute positioning) out of the document flow, positioned by top, bottom, left, right */
            left:20px;
        }
        /* after pseudo-element adds content after the element */
        .heart:after{
            content:" ";
            width:80px; height:120px;
            background:#669;
            border-radius:100px 100px 0 0;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            position:absolute;
            left:48px;top:0px;
        }
    </style>

 

 

②Bubble triangle

Use the transparent feature of border to achieve

.heart{
           margin: 20px auto;
           width: 200px;
           height: 100px;
           background-color: aquamarine;
           position: relative;
       }
        .heart:after{
            content: '';
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 10px solid aquamarine;
            position: absolute;
            top: -10px;
            left: 90px;
        }

 

 ③Cut the corner

Implemented with linear gradients

 

 

 

 

 

 

 

 

.