欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
普陀企业网站建设公司—CSS高级技巧 之 三角制作
时间: 2021-03-16 21:29 浏览次数:
网页页面网页页面网页页面网页页面中常会见面面的一些三角形 #xff0c;应用CSS立刻制图来即可以 #xff0c;无须制成照片或是字体样式款式样式标识。 将长和宽设定为0 #xff0c;再给每条周边色

网页页面网页页面中常会见面的一些三角形 #xff0c;运用CSS马上绘图来便可以 #xff0c;不必做成相片或者字体样式款式标示。 将长和宽设置为0 #xff0c;再给每条周围色 #xff0c;便可以在一个正正正方形中绘图四个以正正正方形管理方法管理中心为节点的三角形。
[标识:內容1]
div class box1 /div d…


网页页面网页页面中常会见面的一些三角形 运用CSS马上绘图来便可以 不必做成相片或者字体样式款式标示。

将长和宽设置为0 再给每条周围色 便可以在一个正正正方形中绘图四个以正正正方形管理方法管理中心为节点的三角形。 

 div class box1 /div div class box2 /div 
.box1 { width: 0; height: 0; border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green;}.box2 { width: 0; height: 0; /* 将其他外框改为透明色 只留上边框为粉鲜红色 便可以得到一个向下的三角*/ border: 50px solid transparent; border-top-color: pink; margin: 0 auto;}

具体实际效果如图所示所显示

左侧为box1 右侧为box2

案例 进行以下具体实际效果图

运用毫无疑问精确精准定位将三角放进box顶部外框外
 div class box span /span /div 
.box { position: relative; width: 120px; height: 250px; background-color: pink;}.box span { position: absolute; right: 15px; top: -10px; width:0; height: 0; line-height: 0; font-size: 0; border: 5px solid transparent; border-left-color: pink;} 

 

 

 

 

 

 

 

 

原文中联接: dtmao.cc/news_show_494014.shtml



Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园