CSS에서 삼각형 구현의 간단한 예에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-07 14:49:281597검색
많은 페이지 제작에서 삼각형이 돌출되도록 디자인됩니다. 다양한 브라우저와 호환되는 디자인 방법은 다음과 같습니다.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.corner-top{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:solid dashed dashed dashed;
border-color:#e66161 transparent transparent transparent;
}
.corner-bottom{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed solid dashed;
border-color:transparent transparent #94e24f transparent;
}
.corner-left{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #85bfda;
}
.corner-right{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed solid dashed dashed;
border-color:transparent #f3bb5b transparent transparent;
}
</style>
</head>
<body>
<p class="corner-top"></p>
</br>
<p class="corner-bottom"> </p>
</br>
<p class="corner-left"> </p>
</br>
<p class="corner-right"> </p>
</body>
</html>
주요 참고 사항:
1. Font-size:0;은 IE와의 호환성을 위한 것입니다. 그렇지 않으면 IE가 사다리꼴로 나타나거나 line-height:0도 작동합니다.
2. 확장 가능한 행을 개선하려면 테두리 색상을 투명하게 설정하세요. 그러나 IE에서는 투명이 회색으로 표시됩니다. 3. 프로젝트에서는 일반적으로 절대값이 선택됩니다. 위치 지정은 삼각형을 해당 위치에 배치하지만 때로는 역삼각형을 사용할 필요가 없는 경우도 있습니다. 그 결과 컨테이너에 높이가 여러 개 있게 됩니다. (삼각형 디자인의 원리를 알 수 있음) 순수 CSS로 삼각형을 구현한 위의 간단한 예는 모두 편집자가 공유하는 내용이기를 바랍니다. 당신에게 참고 자료를 제공하고 PHP 중국어 웹 사이트를 지원하기를 바랍니다. CSS를 사용하여 삼각형을 구현하는 간단한 예에 대한 자세한 예를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.