这次我主要总结一下用Css绘制各种形状的技巧,同时要结合before、after伪元素和定位做出一些效果。
1 #triangle-up{ 2 width: 0; 3 height:0; 4 border-left:50px solid transparent; 5 border-right: 50px solid transparent; 6 border-bottom: 70px solid #81cfa2; 7 }
1 #triangle-down { 2 width: 0; 3 height: 0; 4 border-left: 50px solid transparent; 5 border-right: 50px solid transparent; 6 border-top: 70px solid #81cfa2; 7 }
#triangle-left{
width: 0;
height:0;
border-right: 70px solid #81cfa2;
border-top: 50px solid transparent;
border-bottom:50px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid #81cfa2;
border-left: 100px solid transparent;
}
1 .search:before { 2 border-bottom-color: #000 !important; 3 top: -11px; 4 } 5 .search:after, .search:before { 6 width: 0; 7 height: 0; 8 content: ''; 9 border-style: dashed dashed solid; 10 border-color: transparent transparent #fff; 11 border-width: 0 10px 10px; 12 overflow: hidden; 13 position: absolute; 14 top: -10px; 15 right: 10px; 16 }okaychen
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理