CSS로 삼각형과 평행사변형을 그리는 방법

최근 인터넷에서 CSS를 사용하여 그래픽을 그리는 방법을 가르치는 많은 튜토리얼을 보았습니다. 오늘은 CSS 스타일 시트를 사용하여 삼각형과 평행사변형을 그리는 방법을 요약하겠습니다. 관심 있는 분들은 깊이 있게 공부해 보세요.

첫 번째 방법: 테두리

하나의 직사각형을 사용하여 두 개의 삼각형을 연결하여 최종적으로 평행사변형을 만듭니다. 테두리를 사용하여 삼각형을 생성할 수 있는 이유는 무엇입니까? 먼저 사진을 보겠습니다.

사진 속 세 개의 작은 모양이 변하는 과정을 살펴보면 이미 절반 정도 이해하셨을 것입니다. 실제로 해킹에는 두 가지 조건만 있으면 됩니다. 첫째, 요소 자체의 길이와 너비가 0이고, 둘째, border-color를 통해 불필요한 부분을 숨깁니다. 비슷한 방법으로 사다리꼴을 생성할 수도 있습니다. 위 그림의 세 가지 도형에 대한 코드는 다음과 같습니다. (첨부된 코드펜 예시, http://codepen.io/jerryzou/pen/mJYJym)

#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

다음 단계는 평행사변형을 어떻게 이어붙이는지 생각해 보는 것입니다. 보더 방식에서는 왼쪽 삼각형, 직사각형, 오른쪽 삼각형의 세 부분으로 구성됩니다. 평행사변형을 그릴 때마다 세 개의 요소를 생성하는 것은 너무 번거롭기 때문에 여기서는 :before 및 :after 의사 요소를 선택하는 것이 좋습니다. 이 효과를 달성해 보겠습니다.

삼각형과 직사각형을 매끄럽게 연결하려면 여러 속성이 일관되어야 하므로 Less, Sass, Stylus 등과 같은 CSS 전처리기를 사용하여 이 코드를 작성하면 유지 관리가 더 쉬워집니다. .Scss 버전의 코드는 다음과 같습니다. (첨부된 코드펜 링크는 http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)

//三角形的宽高
$height: 24px;
$width: 12px;
 
//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}
 
//单个三角形的样式
@mixin triangle() {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}
 
//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;
 
  &:after {
    @include triangle();
    right: -$width;
  }
 
  &:before {
    @include triangle();
    left: -$width;
  }
 
  @include parallelogram-color(red);
}

$height와 $width로 설정된 삼각형의 기울기가 너무 작거나 너무 크면 가능합니다. 이로 인해 렌더링이 들쭉날쭉해지기 때문에 이를 사용할 때 다양한 너비와 높이의 시각적 효과를 테스트해야 합니다.

두 번째 방법: 변환을 사용합니다

변환을 사용하여 평행사변형을 구현하는 방법은 제가 쇼핑할 때 본 것인데 그 효과는 아마도 이렇습니다.

보고 나서 생각했습니다. 놀랍게도 평행사변형의 외부 윤곽만 가질 수 있다는 것이 밝혀졌습니다. (방법 1은 채우기 효과가 있는 평행사변형만 생성할 수 있기 때문에) 주로 변환: Skew(...)의 도움으로 구현하는 것이 매우 간단합니다.

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>
 
<div class="city">上海</div>

그래서 우리는 이런 효과를 얻었습니다:

그림을 볼 때 다음과 같이 생각하고 있을 것입니다:

걱정하지 마세요. 전체 div를 왜곡하여 중간 부분이 발생했습니다. 텍스트 또한 기울어져 있어 분명히 우리가 원하는 효과가 아닙니다. 그래서 원하는 효과를 얻으려면 내부 요소를 추가하고 내부 요소를 역으로 왜곡해야 합니다.

구현 코드는 다음과 같으며, CodePen 예제가 첨부되어 있습니다(http://codepen.io/jerryzou) /pen/BNeNwV?editors=110)

<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
 
.city div {
  transform: skew(20deg);
}
</style>
 
<div class="city">
  <div>上海</div>
</div>

Summary

첫 번째 방법은 경계 속성을 사용하여 삼각형을 해킹하고 마지막으로 세 요소를 이어붙여 평행사변형을 구현하는 반면, 두 번째 방법은 변환을 사용하여 평행사변형을 얻습니다. . 전반적으로 두 번째 방법은 첫 번째 방법보다 크기가 훨씬 작고 이해하기 쉽습니다. 유일한 단점은 이 사이트의 페이지 매김에 사용된 것과 같은 사다리꼴을 생성할 수 없다는 것입니다.

이 기사가 모든 사람에게 도움이 되기를 바랍니다. 사실 동일한 원리가 이 방법을 사용하여 정사각형, 직사각형 및 일부 정삼각형도 만들 수 있습니다.

추천 도서:

html과 css로 QQ 펭귄을 만드는 방법

CSS 3을 사용하여 긴 그림자 만들기

css를 사용하여 움직이는 고양이 얼굴 만들기

위 내용은 CSS로 삼각형과 평행사변형을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!