HTML5 new attributes, I don't understand very well, please solve_html/css

①Why can a triangle be formed like this? I don’t understand the principle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><style type="text/css">.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0;padding-left:180px;}.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #000; position: absolute; left: 730px; top: 23px; }/* 三角形 */</style> <ul class="arrow_box">                  <div class="sy">       <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。</p>      </div>           <span class="dateview">2014-1-1</span>              </ul></body></html>

Copy after login

②Why does the vertical line in the picture appear?

<!doctype html><html><head><meta charset="gb2312"><title>协议</title><link href="css/base.css" rel="stylesheet"><link href="css/mood.css" rel="stylesheet"></head><body><header>          </header><div class="moodlist">  <div class="bloglist">    <ul class="arrow_box">     <div class="sy">       <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。</p>      </div>      <span class="dateview">2014-1-1</span>    </ul>    <ul class="arrow_box">         <div class="sy">      <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。</p>        </div>      <span class="dateview">2014-1-1</span>    </ul>    <ul class="arrow_box">         <div class="sy">      <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。</p>      <span class="dateview">2014-1-1</span>        </div>    </ul>  </div></div><footer>  </footer></body></html>

Copy after login

@charset "gb2312";/* CSS Document */* { margin: 0; padding: 0 }body { font: 12px "宋体", Arial, Helvetica, sans-serif; color: #756F71 }img { border: 0; display: block }ul { list-style: none; }a:link, a:visited {text-decoration: none; color: #333;}.left { float: left; }.right { float: right; }.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }.box{ width:1000px; margin:auto; overflow:hidden}header { width: 1000px; margin: auto; height: 80px; position: relative; overflow: hidden }#logo a { width: 260px; height: 60px; margin: 10px 0 0 0; position: absolute; background: url(../images/logo.jpg) no-repeat; display: block }nav { float: right; width: 100%; margin: 30px 0 0 0; text-align: right }nav a { position: relative; display: inline-block; font-size: 18px; font-family: "微软雅黑", Arial, Helvetica, sans-serif; }nav a:hover { text-decoration: none }.topnav a { margin: 0 5px; padding: 0 8px; }.topnav a span:first-child { z-index: 2; display: block; }.topnav a span:last-child { z-index: 1; display: block; color: #999; font: 12px Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align: center }.topnav a:hover span:last-child, .topnav a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }#topnav_current { color: #e15782; }.en { color: #999; font-size: 12px; z-index: 1; display: block; }/* ie */article { width: 1000px; margin: 20px auto; overflow: hidden }aside { width: 250px; }footer { text-align: center; line-height: 40px; border-top: #E8E8E8 1px solid ; width:1000px; margin:auto}

Copy after login

@charset "gb2312";/* CSS Document */.moodlist { margin: auto; width: 100%; overflow: hidden }/* --------------------博客列表-------------------- */h1.t_nav span{ float:right; color:#999}h1.t_nav { border-bottom: #F1F1F1 1px solid; font-size: 12px; font-weight: normal; line-height: 40px; height: 40px;margin:20px auto;width:1000px }h1.t_nav a { width: 100px; display: block; text-align: center; color: #fff; float: left }.n1 { background: #5EA51B; }.n2 { background: #8BBF5D; }.bloglist { width: 1000px; margin: 0 auto; background: url(../images/r_title_bg.jpg) repeat-y 764px 0;overflow: hidden; }.arrow_box { background: #f8f8f8; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(214, 214, 214, 0.7); width: 730px; border-radius: 6px; position: relative; padding: 20px 0; margin: 20px 0; }.arrow_box img { width: 150px; float: left; margin: 0 20px 0 20px; }.arrow_box p { line-height: 24px; padding: 0 20px 20px }.arrow_box::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; }/* 三角形 */.arrow_box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 758px; top: 16px; background: #CCCCCE; border: 2px solid #fff; transition: all 0.5s; }/* 圆形 */.arrow_box:hover::before { border-color: transparent transparent transparent #CECCCD }/* 三角形 */.arrow_box:hover::after { border: #fff 2px solid; background: #5EA51B }/* 圆形 */.arrow_box:hover { background: #f4f2f2; color: #333; text-shadow: #f7f7f7 1px 1px 1px }.dateview { position: absolute; left: 788px; top: 20px; width: 125px; line-height: 30px; background: #5EA51B; border-radius: 0px 40px; text-align: center; color: #fff }.page { margin: 20px 0; text-align: center; width: 100%; overflow: hidden; }.page a b { color: #999; }.page>b, .page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }/* 针对IE6 */.page>b, .page a:hover { background: #333; color: #FFF; }.page a { color: #F33; border: #999 1px solid; }.sy{ overflow:hidden}

Copy after login

③
.arrow_box::before { content : ""; width: 0px; height: 0px; border-style: solid; border-width: 0px 0 20px 22px; border-color: transparent transparent transparent #fff; position: absolute; left: 730px; top: 23px; } /* Triangle */

Used: before Why is the triangle still behind?

Reply to discussion (solution)

Please help

css controlled Well, I didn’t see any tags related to html5. . . ,

①Why can a triangle be formed like this? I don’t understand the principle
The triangle is actually the corner of the left border.
border-width: 0px 0 20px 22px; It means that the width of the left border and the bottom border is set, but the other borders are not set (do not exist).
The left border and the bottom border intersect, and this intersection point html is processed as half of the two borders (triangle), and then combined into a rectangle. (Note, the intersection of two lines is a point, but if the line is thicker, the intersection will be larger, and the point will become a rectangle)
border-color: transparent transparent transparent #000; Note that except the left border is black All other borders are transparent (invisible).
All that is left is the left border (including the intersection triangle).
width: 0px; height: 0px; It means that the box is empty (does not take up space), so only the intersection triangle is left.

②Why does the vertical line in the picture appear?
Using the code you posted, I didn’t find the vertical line.

③ Why is the triangle still behind after using :before?
before is right before the content, but there is no rule that the elements written in front must be displayed in front.
position: absolute; left: 730px; top: 23px; has been repositioned.

border-width: 0px 0 20px 22px;

That intersection is where each border occupies half of the diagonal, right?

What is the significance of different widths?

③ Used: before Why is the triangle still behind?
before is right before the content, but there is no rule that the elements written in front must be displayed in front.
position: absolute; left: 730px; top: 23px; has been repositioned.

Doesn’t before mean that one element is specified in front of another element?

That intersection point is where each border occupies half of the diagonal, right? What is the significance of the different widths of
vs.

?
If the width is the same, it is an isosceles triangle. If it is different, it is an equilateral triangle.

Isn’t before just specifying one element in front of another element?
The :before selector inserts content before the content of the selected element.
is inserted before all content inside the specified element.
This insertion can be understood as inserting a piece of code, which means that the code is in the front, but you can write css styles to make it display elsewhere.

Got it, thank you

HTML5 new attributes, I don't understand very well, please solve_html/css_WEB-ITnose

Reply to discussion (solution)