.aly-tooltip {
  display: inline-block;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  background: #FFFFFF;
  border: 1px solid #D7D8D9;
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
  position: relative;
  left: 10px;
  font-size: 12px;
  width: auto;
  color: #777F84;
}
.aly-tooltip::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #ddd;
  border-right: none;
  border-top: none;
  transform: rotate(45deg);
  top: 8px;
  left: -6px;
  background: #fff;
  box-shadow: -1px 1px 2px #ddd;
}
Copy the code

Above is a dialog box, the color of the small corner can be changed at will

Has not been for CSS classification to write something, today found some information to write this CSS common graphics, development will use oh!

    

Let’s start with the simplest square:

width: 100px;
height: 100px;
background: red;
Copy the code

Rectangle:

width: 200px;
height: 100px;
background: red;
Copy the code

 

Round:

width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
Copy the code

 

The ellipse:

width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
Copy the code

 

The triangle:

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
Copy the code

 

The triangle:

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
Copy the code

 

The left triangle:

width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
Copy the code

 

Right triangle:

width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
Copy the code

 

Upper left triangle:

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
Copy the code

 

Upper right triangle:

width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
Copy the code

 

Lower right triangle:

width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
Copy the code

 

Left triangle:

width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
Copy the code

 

Acme:

border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
Copy the code

 

There is also a dialog:

#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
} 
Copy the code

Well, ok, so that’s pretty much the usual shapes, but what about right Angle trapezoids, parallelograms? And make sure the text inside is positive.

Look at the code:

html <div class="btn">home</div> css : .btn{ position: relative; width: 150px; height: 40px; text-align: center; line-height: 40px; } .btn:after{ position:absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #fb3; z-index: -1; */ transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -webkit-transform: skew(-45deg); }Copy the code

How about this right Angle trapezoid

     

     

This requires the perspective property in CSS3 to be placed on the parent element and then style the transform on the child element:

html 

<div class="parent">
         <div class="child">
             
         </div>
    </div>
    <p></p>
  <div class="parent2">
         <div class="child">
             
         </div>
  </div>

css:

.parent {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            background-color: #fb3;
            transform: perspective(20px) rotatex(5deg);
            transform-origin: right;
       }

        .parent2 {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            background-color: #fb3;
            transform: perspective(20px) rotatex(5deg);
            transform-origin: left;
       }
Copy the code
html
<div class="parent3">
         <div class="child">
             
         </div>
    </div>

css:

.parent3 {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            background-color: #fb3;
            transform: perspective(20px) rotatex(-5deg)  ; 
            transform-origin: left;
       }
Copy the code

 

Rotate (-5deg) and rotate(-5deg).

It is mentioned above that the background graphics have rotation changes, but the text inside can not be distorted, the above method can be achieved by pseudo-element, also can do so, the parent element can rotate the positive degree, and then his child element in the rotation of the negative degree is OK;

Parent element:. Messages_margin20 >div>div>div:nth-of-type(2)>a{border-radius: 10px; transform: skew(-30deg); display: block; background: linear-gradient(to right, #a20000, #8e0000, #a20000); -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); } sub-elements:. Messages_margin20 >div>div>div:nth-of-type(2)> a. messages_col {transform: skew(30deg); -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); }Copy the code

(This code comes from today’s work project.)

 

Love a person too much,the heart will be drunk; hate a person too long,the heart will be broken.

Love a person too deep, the heart will be drunk; Hate a person too long, the heart will be broken.