CSS3에서 삼각형 테두리 효과를 얻는 방법
- WBOY원래의
- 2021-12-16 10:33:216646검색
방법: 1. "테두리: 길이 값 투명, 테두리 상단: 높이 값 단색 값" 명령문을 사용하여 빈 요소를 삼각형 스타일로 설정합니다. 2. 다양한 색상의 큰 삼각형 요소 안에 작은 삼각형 요소를 배치합니다. 내부에서는 테두리가 있는 삼각형 효과를 얻을 수 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 테두리가 있는 삼각형 효과를 얻는 방법
Css에서 테두리가 있는 삼각형의 효과를 얻으려면 테두리 속성을 사용해야 합니다.
먼저 너비와 높이가 0인 div 요소가 필요합니다. 그런 다음 테두리 속성을 사용하여 div의 테두리 스타일을 설정하고 테두리의 두께 값을 아래쪽 삼각형 길이의 절반으로 설정한 다음 테두리를 설정합니다. 색상을 투명하게 합니다.
마지막으로 border-top 속성을 사용하여 div 요소의 상단 테두리를 표시합니다.
다양한 색상의 큰 삼각형 요소 안에 작은 삼각형 요소를 배치하면 테두리가 있는 삼각형 효과를 얻을 수 있습니다.
예제는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#demo {
width: 0;
height: 0;
position: relative;
border-top: solid 50px transparent;
border-right: solid 50px black;
/* 黑色大三角形 */
border-bottom: solid 50px transparent;
}
#demo:after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 3px;
top: -45px;
border-top: solid 45px transparent;
border-right: solid 45px white;
/* 白色小三角形 */
border-bottom: solid 45px transparent;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 삼각형 테두리 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3에서 뒤집기 효과를 두 번 얻는 방법다음 기사：CSS3에서 뒤집기 효과를 두 번 얻는 방법