記一次前端css樣式的三角形的應用
阿新 • • 發佈:2019-04-05
content 面試 posit htm relative abs .com css border
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>
記一次前端css樣式的三角形的應用