HTML5新属性，不是很懂，求解_html/css_WEB-ITnose-html教程-PHP中文网

①为什么这样能形成三角形？没看懂原理

<!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>

登录后复制

②为什么能出现图中的那个竖线

<!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 class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1325">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680183182782.png" alt="AI新媒体文章">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1325">AI新媒体文章</a>
                            <p>专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI新媒体文章">
                                <span>75</span>
                            </div>
                        </div>
                        <a href="/ai/1325" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI新媒体文章">
                        </a>
                    </div>
                        </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>

登录后复制

@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}

登录后复制

@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}

登录后复制

③
.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; }/* 三角形 */

用了:before为什么三角形还在后面呢？

立即学习“前端免费学习笔记（深入）”；

回复讨论(解决方案)

求助啊

css控制的吧，没看到跟html5相关的标签。。。、

①为什么这样能形成三角形？没看懂原理
三角形其实是左边框的拐角。
border-width: 0px 0 20px 22px;说明设置了左边框和下边框的宽度，而其它边框没有设（不存在）。
左边框和下边框是相交的，而这个交点html就处理为两个边框各占一半（三角形），然后拼成一个矩形。（注，两条线的交点是一个点，但如果线比较粗，那么交点就大，从而点就成看矩形）
border-color: transparent transparent transparent #000;说明除左边框为黑色外其它边框都是透明的（看不见）。
所有就值剩下了左边框（包括那个交点三角）。
width: 0px; height: 0px;说明盒子是空的（不占位置），所以就只剩下了那个交点三角。

②为什么能出现图中的那个竖线
用你贴的代码，我没发现那个竖线

③用了:before为什么三角形还在后面呢？
before是加在内容之前没错，可没规定在写在前面的元素就一定要显示在前面吧。
position: absolute; left: 730px; top: 23px;被重新定位了。

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

那个交点是每个边框各占据对角线的一半，对吗？

宽度不同有什么意义？

③用了:before为什么三角形还在后面呢？
before是加在内容之前没错，可没规定在写在前面的元素就一定要显示在前面吧。
position: absolute; left: 730px; top: 23px;被重新定位了。

before不就是在一个元素指定在另外一个元素的前头吗？

那个交点是每个边框各占据对角线的一半，对吗？
对

宽度不同有什么意义？
宽度相同就等腰三角形，不同就不等腰了

before不就是在一个元素指定在另外一个元素的前头吗？
:before 选择器在被选元素的内容前面插入内容。
是在指定元素的里面的所有内容之前插入。
这个插入可以理解为插入一段代码，也就是说代码中是在前面的，但是可以写css样式让它显示在其它地方。

明白了，谢谢