1) 面试题是这样的要求用 CSS 实现
- <section>
- <div></div>
- <div></div>
- </section>
- <style>
- div{
- position:relative;
- width:200px;
- height:50px;
- background:red;
- float:left;
- margin-left:10px;
- }
- div::before{
- content:"";
- display:block;
- position:absolute;
- top:0;
- left:0px;
- width:0px;
- height:0px;
- border-top:25px solid transparent;
- border-bottom:25px solid transparent;
- border-left:25px solid #fff;
- z-index:1;
- }
- div::after{
- content:"";
- display:block;
- position:absolute;
- top:0;
- right:-25px;
- width:0px;
- height:0px;
- border-top:25px solid transparent;
- border-bottom:25px solid transparent;
- border-left:25px solid red;
- z-index:2;
- }
- </style>
来源: http://www.bubuko.com/infodetail-3012040.html