기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. 테두리를 사용하여 사다리꼴을 그립니다. (내용은 절대 위치에 있어야 합니다.)

HTML:

//左边斜边
<div class="t">
    <div class="f"></div>
</div>
//右边斜边
<div class="t2">
    <div class="f"></div>
</div>

CSS:

.t{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-right: 19px solid transparent;
    border-bottom: 35px solid #4B75FF;
}
 
.f{
    position: absolute;
    bottom: 0;
}
.t2{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-left: 19px solid transparent;
    border-top: 35px solid #4B75FF;
}

결과:

2. 클립 경로를 사용하여 사다리꼴을 그립니다.

HTML：

<div class="card-info_s3-bottom_cc_left">
</div>

CSS：

.card-info_s3-bottom_cc_left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
    width: 277.5px;
    height: 35px;
    padding-left: 26px;
    clip-path:polygon(0 0,258.5px 0px,277.5px 35px,0px 35px);
    background-color: #4B75FF;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 30px;
}

결과:

확장자: 클립 경로

클립 경로 속성은 요소의 클리핑 영역을 정의하여 표시할 부분과 숨길 부분을 제어하는 ​​데 사용됩니다. 다양한 기능과 매개변수를 사용하여 복잡한 자르기 모양을 만들 수 있습니다. CSS에서 클립 경로 속성은 다양한 기능을 사용하여 클리핑 영역을 정의할 수 있습니다. 일반적으로 사용되는 기능은 다음과 같습니다.

1. Circle(): 원형 자르기 영역을 만듭니다. 매개변수는 반경과 원 중심의 좌표입니다.
2. ellipse(): 타원형 클리핑 영역을 생성합니다. 매개변수는 수평 및 수직 축의 반경과 원 중심의 좌표입니다.
3. 폴리곤(): 다각형 클리핑 영역을 생성합니다. 매개변수는 다각형을 구성하는 정점의 좌표입니다.
4. path(): SVG 경로를 사용하여 자르기 영역을 정의합니다. 인수는 경로의 문자열 표현입니다.