西安外贸网站建设公司,内蒙古建设部网站官网,360网页版登录入口,购物商城网站建设方案1、效果图 2、难点和思路
难点#xff1a;上面那个带边框的小三角不好实现 思路#xff1a;画两个不同大小的div#xff0c;使其基本重叠#xff08;两个大小不同#xff0c;不完全重叠#xff0c;让红色的露出一点边边#xff09;#xff0c;让白色div放到最上层上面那个带边框的小三角不好实现 思路画两个不同大小的div使其基本重叠两个大小不同不完全重叠让红色的露出一点边边让白色div放到最上层设置z-index
3、代码实现
p classpSanStylep classpSanStyleInner/p/pdiv classdivStylep stylepadding: 10px 0 0 10px; font-weight: bold项目/phr stylewidth: 240px /a-rowa-col :span7 styleborder-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px项目名称/a-cola-col :span7 styleborder-right: 1px solid black; margin: 5px 0 5px 5px; padding-right: 5px项目名称/a-cola-col :span7 stylemargin: 5px 0 5px 5px项目名称/a-col/a-row/div.pSanStyle {width: 0;height: 0;position: relative;border: 10px solid transparent;border-color: transparent transparent red transparent ;margin-left: 50px;}.pSanStyleInner{width: 0;height: 0;border: 12px solid transparent;border-color: transparent transparent white transparent ;position: absolute;margin-left: -11.5px;margin-top: -10px;z-index: 21;}.divStyle {position: absolute;width: 260px;height: 150px;margin-top: 20px;background-color: white;padding: 10px;border: 1px solid red;}
