CSS3의 새로운 콘텐츠를 사용하여 투명한 삼각형을 만드는 방법의 예-CSS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-08-11 13:59:14

원래의

1710명이 탐색했습니다.

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!