집 > 기사 > 웹 프론트엔드 > CSS3의 새로운 콘텐츠를 사용하여 투명한 삼각형을 만드는 방법의 예

CSS3의 새로운 콘텐츠를 사용하여 투명한 삼각형을 만드는 방법의 예

巴扎黑원래의: 2017-08-11 13:59:141665검색

이 글은 CSS3를 사용하여 삼각형을 만드는 예를 공유합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

먼저 효과를 살펴보겠습니다. CSS3 이전에는 전혀 상상할 수 없는 일이었습니다. 그러나 오늘날에는 HTML5와 CSS3의 인기로 인해 이 효과를 얻는 것이 문제가 되지 않습니다.

구현된 코드를 살펴보세요:

<!DOCTYPE html>
<html>
<head>
<style type=&#39;text/css&#39;>

/* 上三角 */
.arrow-up {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
}

/* 下三角 */
.arrow-down {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid orange;
}

/* 右三角 */
.arrow-right {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid blue;
}

/* 左三角 */
.arrow-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid silver;
}
</style>
</head>
<body>
 <p class="arrow-up"></p>
 <p class="arrow-down"></p>
 <p class="arrow-left"></p>
 <p class="arrow-right"></p>
</body>
</html>

위 내용은 CSS3의 새로운 콘텐츠를 사용하여 투명한 삼각형을 만드는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 클리어 플로트 메소드 요약다음 기사：CSS 클리어 플로트 메소드 요약