Implementation Case 1: Implementation case 1

Implementation Case 1: Implementation case 1
Today we will introduce the use cases of triangles.Explanation:1. The word on this square is omitted, but the width of the text block must be controlled to avoid being blocked by the "clicked" prompt above. 2. the prompt "clicked" is implemented as follows: Set "position: relative;" for a large div and set "position: absolute;" for a small div ;"; you must set the width and height of the small div, and then adjust the transform, top, right, and other details of the small div.Tip:1. You can reset the rotation center during rotation and use transform-origin (please search for details). The default rotation center is the center position of the element; 2. The rotation effect is affected by the height, width, top, and right values of the small div. The default rotation angle is 45deg. Other values can be adjusted based on the effect.3. Remember to add overflow: hidden; to hide a small div out of the big div.The html code is as follows:

<Div id = "container"> <div id = "square"> <div id = "tip"> vertices </div>

The CSS code is as follows:

 1 *{ 2     margin: 0; 3     padding: 0; 4 } 5 #container { 6     text-align: center; 7 } 8 #square { 9     position: relative;10     background-color: #DBEDFD;11     width: 100px;12     height: 100px;13     margin: 50px auto;14     overflow:hidden;15 }16 #tip {17     height: 20%;18     width: 80%;19     position: absolute;20     top: 10%;21     right: -20%;22     transform: rotate(45deg);23     background-color: white;24 }

 

I hope you can provide better implementation methods. O (∩ _ ∩) O thank you.