请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>
<div id=”demo”></div>
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#demo
{
width:100px;
height:100px;
background:#fff;
border:2px solid #000;
position:relative;
}
#demo:before
{
content:"";
position:absolute;
top:23px;
left:100%;
z-index:1;
border-top:7px solid transparent;
border-left:7px solid #fff;
border-bottom:7px solid transparent;
}
#demo:after
{
content:"";
position:absolute;
top:20px;
left:100%;
z-index:-1;
border-top:10px solid transparent;
border-left:10px solid #000;
border-bottom:10px solid transparent;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
或者
#demo{
width: 100px;
height: 100px;
border:2px solid #000; //左边的矩形框
position: relative;
margin-right: 10px;
}
#demo:after{
content: "";
position: absolute;
left: 110px;
border:solid transparent;
top: 20px;
border-width: 10px;
border-left: 10px solid #fff;
}
#demo:before{
content: "";
position: absolute;
left: 110px;
border:solid transparent;
top: 18px;
border-width: 12px;
border-left: 12px solid #000;
}