主要思想为:先实现大的正方形边框,在边框前实现黑底三角形,再覆盖一个白底三角形。
主要用border-left-color实现三角形,left则三角形顶点向右,right则三角形顶点向左。
<!DOCTYPE html>
<html>
<head>
<title>css布局(凸三角正方形)</title>
<meta charset="UTF-8">
<style type="text/css">
#demo{
position:relative;
width:100px;
height:100px;
border:2px solid #000;
background-color:#fff;
}
/*对于before和after前的冒号。CSS2为单冒号,CSS3为双冒号,但IE9及以上才支持*/
#demo::before, #demo::after{ /*冒号要紧跟#demo后面*/
content:"";/*content属性是必须的而且应该经常被应用。否则,伪元素无论如何都无法正常工作。单引号和双引号都可以*/
position:absolute;
left:100%;
width:0px;
height:0px;
border:solid transparent;
}
#demo::before{
top:18px;
border-width:12px;
border-left-color:#000;
}
#demo::after{
top:20px;
border-width:10px;
border-left-color:#fff;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>