css生成三角形

  制作页面的时候经常会遇到带三角形的小tip,如今为了省流量以及加快页面响应等考虑,都会用css来拼接一个三角形。我之前也只是大致的看过。没有仔细去想是怎么实现的,最近切图遇到好几个拼接三角形的应用就在这里总结一下。

首先我们看一个css border构成的一个正方形。如下

为了方便解说我给每个边框赋予不一样的颜色。 1.第一步我们去掉上边框,即把border-top-width设置为0

然后我们发现图形变成这样

观察一下会发现这个正方形被横着砍掉了一半;然后我们发现把左右边框的颜色设置为透明,就可以呈现一个三角形了
那么第二部我们把border-left-color 和border-right-color 设为transparent;如下

我们还可以把左边框或者右边框width设置为0 形成一个箭头向下的三角形如下:

左边框款宽度为0

右边框款宽度为0

这就是一个css形成的三角形的大致原理。我们可以在这个基础上进行变幻改进,比如

这是一个等腰直角三角形我们可以把他变成一个等腰的非直角的三角形,只需要加宽左边框的宽度 缩小上下边框的宽度就可以了如下:

下面说说这些三角形的具体应用场景我个人遇到的有一下情况

第一个如下

第二种情况如下在红色标题的下凸出去的下方加个三角形看起来像3D的感脚,代码如下:

    		  <div style="width:200px;height:150px;background-color:#ecf4fc;padding-top:20px;">
    	<div style="position:relative;">
    		<div style="width:150px;margin-left:-8px;height:20px;line-height:20px;color:#fff;background-color:#fe3456;padding:10px;text-align: center;">个人资料</div>
    		<div style="position: absolute;border-color: transparent #601915 transparent transparent;border-style: solid;border-width: 0 8px 5px 0;height: 0;line-height: 0;width: 0;top: 40px;left: -8px;">
    		</div>
    	</div>
    </div>
    	

效果如下

个人资料

第三种情况比较复杂,但是应用场景也蛮多的,先来个效果如下

代码如下

    		<div style="width:200px;height:100px;border:1px solid #c9c7c8 ;
position:relative;" id="popup" >
    		<div id="border-wrap" style="position:absolute;top:20px;right:-15px;border-color:transparent transparent transparent #c9c7c8 ;height:0;width:0;border-width:5px 0 5px 15px;border-style: solid;">
    		</div>
    		<div id="border-shield" style="position:absolute;top:21px;right:-10px;border-color:transparent transparent transparent #fff;height:0;width:0;border-width:4px 0 4px 10px;border-style: solid;"> 
    		</div>
    		</div>
    	

带边框的popup提示框首先我们构建一个外层的div popup;然后我们再构建一个三角形的div border-wrap 把他定位到对应的位置,设置border-color为popup的border的颜色 最后我们构建一个border-shield的三角形div border-color为popup的背景颜色;把这个三角形形状设置小点,然后绝对定位到合适的位置把border-wrap遮住一部分,则border-wrap就看起来就像一个带边框的三角形了.

全部的demo点这里

本文标题:css生成三角形
本文链接:https://56way.com/p/13.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。