웹 페이지의 삼각형 가장자리는 여전히 반투명합니다. 오늘날의 디자이너는 점점 더 발전하고 있으며 CSS도 이에 맞춰야 합니다.

요구사항

오늘 그룹에서 모서리가 누락된 이런 종류의 삼각형을 만들고 반투명 그림자를 만드는 방법에 대한 요청을 봤습니다.

분석

이를 달성하려면 CSS를 사용하여 다음과 같이 온라인에서 코드를 찾을 수 있습니다.

테두리를 투명하게 할 수 있는지 한번도 시도해본 적이 없어서 테스트를 해봐야겠습니다.

그러면 빨간색을 rgba로 대체할 수 있는지 테스트해 보겠습니다. 가능하다면 전투의 절반은 승리합니다.

간단한 테스트를 거쳐 실제로 작동합니다.

.sanjiao
{
위치: 상대;
너비: 0;
높이: 0;
테두리 하단: 100px solid rgba(0,0,0,.5) ;
테두리 왼쪽: 100px 단색 투명;
}

그런 다음 다음 단계는 그림자 삼각형에 약간 작은 흰색 삼각형을 삽입하는 것입니다.

구현

<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는 더 이상 구현되지 않습니다.