首页 > > 网页制作 > css >

网页中三角切边还半透明，现在的设计师越来越牛…

2018-06-24 00:16:24来源：未知阅读 ()

需求

今天在群里看到一个需求，啊这种三角形缺角怎么做啊，还带半透明阴影的。

分析

要实现这个，可以用css做三角，网上找一下代码，像这样。

由于以前没有试过border能不能带透明，所以需要试验一下。

那么去试验下，red能不能用rgba去替换，如果可以的话那就成功一半了。

简单试验下，居然可以。

.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
border-left: 100px solid transparent;
}

那么接下来就是在阴影的三角里插入一个白色的略小一点的三角就可以了。

实现

<div style="background: url(http://uploads.xuexila.com/allimg/1608/704-160P9224Z4.jpg);
	width: 900px; height: 300px; padding-top: 20px;" class="bg">
	<div class="sanjiao">
		<div class="sanjiaobai">
		</div>
	</div>
</div>
<style>
	.sanjiao
	{
		position: relative;
		width: 0;
		height: 0;
		border-bottom: 100px solid rgba(0,0,0,.5);
		border-left: 100px solid transparent;
	}
	.sanjiaobai
	{
		position: absolute;
		right: 0;
		top: 20px;
		width: 0;
		height: 0;
		border-bottom: 80px solid #fff;
		border-left: 80px solid transparent;
	}
</style>

至此就完成了这个缺角还带阴影的div了，至于右侧填充一个白色的div，还有下面正常矩形div就不再这里实现了。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有