需求

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

分析

要实现这个，可以用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;
}

设计师AI工具箱

最懂设计师的效率提升平台，实现高效设计出图和智能改图，室内设计，毛坯渲染，旧房改造，软装设计

124

查看详情

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

实现

立即学习“前端免费学习笔记（深入）”；

<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就不再这里实现了。

立即学习“前端免费学习笔记（深入）”；