摘要：
请使用CSS实现下图所示的样式，相关维度如图所示。dom结构为：这是去年百度的一道笔试题。它包括定位、三角形和伪元素。这是我的答案和一些知识总结，都在节目中。DOCTYPEhtml˃文档#demo｛width:100px；height:100px，背景色：#fff；border:2pxsolid#000；位置：相对；｝#demo:之前，#demo:之后{width:0；height:0；content:“”；位置：绝对；边框：solidtransparent；左：100%；}#演示：前｛/*左边框：12pxsolid#000；*/边框宽度：12px；左边框颜色：#000；顶部：20px；｝#演示：在{/*左边框：10px实心#fff；*/边框宽度：10px；左边框颜色：#fff，顶部：22px；}/*之后三角形*/#sanjiao｛宽度：0；高度：0；边框：50pxsolidtransparent；边框左侧颜色：红色；｝伪元素选择器：：第一行，：第一个字母：before，：after。
请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>
<div id=”demo”></div>
这是一道去年的百度笔试题。
涉及定位、三角形、伪元素。
下面是我的解答以及一些知识概述，都在程序里了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #demo{ width: 100px; height: 100px; background-color: #fff; border: 2px solid #000; position: relative; } #demo:before, #demo:after{ width: 0; height: 0; content: ""; position: absolute; border: solid transparent; left: 100%; } #demo:before{ /*border-left: 12px solid #000;*/ border-width: 12px; border-left-color: #000; top: 20px; } #demo:after{ /*border-left: 10px solid #fff;*/ border-width: 10px; border-left-color: #fff; top: 22px; } /*三角形*/ #sanjiao{ width: 0; height: 0; border: 50px solid transparent; border-left-color: red; } </style> </head> <body> <div id="demo"></div> <p>伪元素选择器： :first-line, :first-letter :before, :after。<br/> :before表示在元素之前添加一个元素，:after表示在元素之后添加一个元素。<br/><br/> CSS中绘制三角形：容器宽高设为0，然后三角形的高就是border-width, 所以让border: 50px solid transparent，再把想要的三角对应的方向设成想要的颜色就好了，如border-left-color: red。 </p> <div id="sanjiao"></div> </body> </html>