请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<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>
时间： 2024-10-06 23:50:47