Triangular edges on web pages are still translucent. Today's designers are getting better and better, and CSS must keep up.

Demand

I saw a request in the group today, how to make this kind of triangle with missing corners, and also have a translucent shadow.

Analysis

To achieve this, you can use css to make a triangle and find the code online, like this.

Since I have never tried whether the border can be transparent before, I need to test it.

Then let’s test whether red can be replaced with rgba. If it can, then half the battle is won.

After a simple test, it works.

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

Then the next step is to insert a white, slightly smaller triangle into the shadow triangle.

Achieved

<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>

　

At this point, the div with missing corners and shadow is completed. As for filling a white div on the right side, and the normal rectangular div below, it is no longer implemented here.