The Sina Weibo comment page is as follows. Pay attention to the arrow symbol in the upper right corner.
I looked at the implementation method of its arrow symbol and found that it was created with a <em> element and a special symbol.
So I want to use HTML elements to achieve the same effect. In the experiment, I found a way to achieve the goal. The Code is as follows:
<Style type = "text/CSS">
Div. Arrow
{
Width: 0px;
Height: 0px;
Border-bottom: 50px solid # f00;
Border-left: 50px solid # FFF;
Border-Right: 50px solid # FFF;
}
</Style>
</Head>
<Body>
<Div class = "Arrow"> </div>
</Body>
See Demo: http://wandouyouxi.com/cnblogs/css/untitled-1.html Effect
In this effect, you can create arrows in the left and right directions. For example, to set the up arrow, set border-bottom in CSS and set the left and right border to white. Similarly, the right arrow needs to be set to border-right, and then the upper and lower border is white.
Finally, I am not quite clear about the principle of this method. As shown in,
Why do we set the left border when the bottom border is set, and the left border will overwrite the bottom border? Go to W3C and check the border definition:
I still don't understand the questions raised above. Please do not give me any advice from the school friends.