CSS를 사용하여 삼각형 만들기

html 코드:

CSS 코드:

.div{
테두리 상단:40px 솔리드 #ff0077;
테두리 왼쪽:40px 솔리드 #004444;
테두리 하단:40px 솔리드 #999999;
테두리 오른쪽:40px 솔리드 #333333;
높이: 0px;
너비: 0px;
}

효과:

이제 하나씩 풀어보세요

html 코드:

CSS 코드:

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
테두리:100px 단색 투명;
높이: 0;
너비: 0;
}
.triggle-top{
border-top-color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color: #999999;
}
.triggle-right{
border-right-color: #333333;
}

렌더링:

간단히 말하면 테두리 속성을 사용하여 작은 삼각형을 만듭니다

추가:

그리고 제가 말씀드리고 싶은 것은 다음과 같은 일반적인 태그입니다.

이러한 x 삭제는 다음을 사용하여 수행할 수 있습니다:after{content:'x'}